css样式扩充

border-radius : 

                削圆角   可以跟四个角 要削角的像素值    左上开始顺时针转   border-radius: 10px 20px 30px 40px;

                每个角都有一个水平半径和垂直半径    border-radius:  100px/50px;水平半径/垂直半径

box-shadow:

                  属性值:      x方向偏移     y方向偏移     阴影发散度 (模糊度)      阴影宽度     阴影颜色

                  阴影可以设置多组值,用逗号隔开

background:背景设置

                background-origin 设置第一张背景图片开始铺的位置   border-box从边框开始 padding-box  content-box

              background-clip背景裁切     属性值同于上者

              background-size: 设置背景图的尺寸

              -webkit-mask-image: url(路径)  背景蒙版 可设置是否平铺  size    -webkit-是兼容性写法

              background:linear-gradient(to left,red,orange,yellow,#00ff00,cyan, blue,purple);

                线性渐变:   方向,颜色至少两个(可以加渐变位置,用小括号写到颜色后边),    可以写多个

              radial-gradient:径向渐变 (半径 形状 at 圆心位置,颜色1(渐变位置),颜色2,....)

                                            1,circle:圆 2,ellipse:椭圆形

box-reflect:倒影,有三个参数

参数一:用来设置倒影所在的位置分为left right below above四个方位

参数二:设置倒影与元素之间的距离

参数三:设置倒影上的蒙版,可以是图片也可是渐变

-webkit-box-reflect: right 10px  linear-gradient(to right,yellow,rgba(0,0,0,0));

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,799评论 0 2
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,672评论 0 8
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,056评论 0 2
  • 新学期,到了一所新学校。师生的面孔是新的,环境是新的,所有一切全是新的!我有点懵懂,一时找不到北,工作也是千头万绪...
    书情画意阅读 125评论 0 0