好程序员web开发分享CSS3新增属性

  1. 云栖社区>
  2. 博客>
  3. 正文

好程序员web开发分享CSS3新增属性

好程序员 2019-05-06 17:07:25 浏览344
展开阅读全文

好程序员web开发分享CSS3新增属性CSS3 背景的新增属性

1、Background-origin 背景原点
说明:指定background-origin属性应该是相对位置属性值:padding-box 背景图像填充框的相对位置 
border-box 背景图像边界框的相对位置 
content-box 背景图像的相对位置的内容框 
注:默认值为:padding-box;
2、Background-clip 背景裁切
说明:background-clip 属性规定背景的绘制区域。属性值:border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框
。 
注:默认值:border-box;
3、Background-size 背景尺寸
说明:background-size 规定背景图像的尺寸属性值:length
规定背景图的大小。第一个值宽度,第二个值高度。

Percentage(%)
以百分比为值设置背景图大小

cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域

contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
4、css3多背景属性
Eg:p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景,第一个最上面 
background-color:yellow; //这是定义的默认背景颜色,全部适合 }
CSS3 颜色特性
1、rgba 颜色模式
2、 Hsl 颜色模式(了解)
3、 Hsla 颜色模式(了解)
CSS3 边框的新增属性
1、border-color
EG:border-color:red green #000 yellow;(上右下左)
2、border-image
border-image 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-outset 边框图像区域超出边框的量
3、Border-radius 圆角边框
(1).box{     border-radius: 5px 10px 20px 50px          }
_7

(2).div1{border-radius: 2em/1em}
_8

以斜杠/分开后面的参数:
第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径
(3).div1{         border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
_9

按顺时针的顺序,斜杠/左边是四个圆角的水平半径,右边是四个圆角的垂直半径,但是通常我们很少写右边的参数,那就是默认右边等于左边的值。
4、box-shadow 盒子阴影
属性值:
_10

Eg:box-shadow: 10px 10px 5px #888888

网友评论

登录后评论
0/500
评论
好程序员
+ 关注