HTML5技术

CSS3之新UI方案 - TheWinds

字号+ 作者:H5之家 来源:H5之家 2016-12-26 18:04 我要评论( )

border-radius 圆角 参数可为像素 也可为百分比 当一个参数时 作用范围为四个角 当两个参数时 作用范围为 左上右下 右上左下 当三个参数时 作用范围为 左上 右上左下 右下 当四个参数时 作用范围为 左上 右上 右下 左下 当参数中有'http://www.cnblogs.com/'

border-radius 圆角

参数可为像素 也可为百分比
当一个参数时 作用范围为四个角
当两个参数时 作用范围为 左上右下 右上左下
当三个参数时 作用范围为 左上 右上左下 右下
当四个参数时 作用范围为 左上 右上 右下 左下
当参数中有'http://www.cnblogs.com/'时 例如 100px/150px 则表示:X轴半径/Y轴半径

-border-image 边框背景

-border-image:图片链接 图片切割上下 图片切割左右 边框排列方式 ; 
border-image-repeat:;边框排列方式
                    round 平铺 与repeat效果一样
                    repeat 重复
                    stretch 拉伸 默认
在-webkit-中会自动补上中间部分 

-moz-border-left-colors: 边框多色彩处理

例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

注:目前只在火狐中起效果

-webkit-repeating-linear-gradient  平铺渐变

-linear-gradient:  线性渐变

IE9及9以下不支持线性渐变

通过滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');
可兼容到IE6
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 1为从left->right 0为从top->bottom

-radial-gradient:方向,关键字(可选),颜色;

径向渐变关键字

closest-size 向最近端渐变
closest-corner 向最近角渐变
farthest-corner 向最远角渐变
contain 包含(元素将其包含 使其渐变不会超出元素周围)
cover 覆盖(渐变将整个元素铺满)

background-size:背景尺寸

background-size:contain 包含(缩小) 元素包含背景图(背景图刚好放进盒子里)
cover 覆盖(放大) 背景图等比放大后将元素填满

background-origin:背景图原点设置

background-origin:border-box; 从边框开始计算
                           content-box 从内容开始计算
                           padding-box 从内补白开始计算(默认)
background-clip: 背景裁剪

background-clip:border-box; 默认
解决背景半透明边框显示背景图片的问题:
                       padding-box 切除padding以外的背景
                       content-box 切除content以外的背景
                       -webkit-background-clip:text; 切除文字以外的背景(目前火狐不适用)

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3之盒子模型 - TheWinds

    CSS3之盒子模型 - TheWinds

    2016-12-26 18:03

  • css3加载ing动画 - 明lucky

    css3加载ing动画 - 明lucky

    2016-12-19 13:00

  • 物联网建设中通讯互联层的终极解决方案 - 唯笑志在

    物联网建设中通讯互联层的终极解决方案 - 唯笑志在

    2016-12-17 15:01

  • 第一个随笔,调试中,用的CSS3 - TheWinds

    第一个随笔,调试中,用的CSS3 - TheWinds

    2016-12-17 12:01

网友点评
7