• css3初识


    知识点一:CSS3概述

    1、CSS3简介

      如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷动画圆角阴影边框图片…

    2、CSS3现状

      1、浏览器支持程度差,需要添加私有前缀

        -webkit- :谷歌、Safari

        -moz- :火狐

        -ms- :IE

        -o- :欧朋

      2、移动端支持优于PC端

      3、不断改进中

      4、应用相对广泛

    知识点er:CSS3颜色

    1、RGB

      RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

      000:黑色 255 255 255:白色

    2、RGBA

      RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数

    3、十六进制颜色

      指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。

    4、HSL

      HSL指定:HSL(色调(0-360,0代表红色,120代表绿色,240代表蓝色),饱和度(0-100%),亮度(0-100%))

    5、HSLA

      HSL指定:HSL(色调(0-360,0代表红色,120代表绿色,240代表蓝色),饱和度(0-100%),亮度(0-100%),alpha(0-1))

    知识点三:文本效果

    1、文本阴影

      text-shadow: 5px  5px  5px  #FF0000;

      text-shadow:水平阴影  垂直阴影  模糊的距离  阴影的颜色

    2、文本溢出

      white-space: nowrap; 

      overflow: hidden;

      text-overflow: ellipsis;

    知识点四:CSS3边框

    1、圆角

      border-radius:  ;

    2、盒子阴影

      box-shadow:水平阴影  垂直阴影  模糊的距离  阴影的颜色

    3、边界图片

      border-image:url()  30  30  round:平铺(strech:拉伸);

    知识点五:CSS3框

    1、box-sizing属性:不管margin

      box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

      box-sizing: content-box|border-box|inherit

    说明

    content-box

    这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

    border-box

    指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

    inherit

    指定 box-sizing 属性的值,应该从父元素继承

    2、调整尺寸

      resize属性指定一个元素是否应该由用户去调整大小,搭配overflow:hidden;使用

      resize:  both(vertical:垂直方向 horizontal:水平方向);

    知识点六:CSS3按钮

    1、按钮颜色

      使用 background-color 属性来设置按钮颜色

    2、按钮大小

      使用 font-size属性来设置按钮大小

    3、圆角按钮

      使用 border-radius 属性来设置圆角按钮

    4、按钮边框颜色

      使用 border 属性设置按钮边框颜色

    5、鼠标悬停按钮

      使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

    6、按钮阴影

      使用 box-shadow 属性来为按钮添加阴影

    7、按钮禁用

       使用cursor 属性并设置为 "not-allowed" 来设置按钮禁用

    8、按钮宽度

      使用 width 属性来设置按钮的宽度, 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。

  • 相关阅读:
    PS插件安装
    在linux中安装Python
    快慢指针 | 环形链表
    Intel VT-x 支持但处于禁用状态开启
    函数
    连接(交叉连接、内连接、外连接、自连接)
    游标cursor 与循环fetch
    Identity 自增长标识
    Trigger 触发器
    Procedure 存储过程
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13532083.html
Copyright © 2020-2023  润新知