CSS3新增属性(背景图、边框背景、圆角)

CSS3新增属性(背景图、边框背景、圆角)添加多张背景图:语法:background:url,url;background:url no-repeat left top, url no-repeat right top, url no-repeat right bottom, ur

大家好,欢迎来到IT知识分享网。

1、Background-size 背景尺寸

说明:background-size 规定背景图像的尺寸 属性值

length (10px) 规定背景图的大小。第一个值宽度,第二个值高度。(直接定义背景图的大小) Percentage(%) 以百分比为值设置背景图大小(参照元素的大小) cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域 contain 把图像图像扩展至最大尺寸,以使其宽度或高度完全适应内容区域。

复合式写法:background: url(img/laoli.jpg) no-repeat 0 0/cover;说明:backgroun-sizebackground-position要用 “ / ” 组成一个属性值一起写;

2、background-origin 背景原点(起始点)位置

说明:指定background-origin属性应该是相对位置 属性值 padding-box 背景图像填充框的相对位置 (从padding区开始显示背景图)默认值 border-box 背景图像边界框的相对位置(从边框区开始显示背景图) content-box 背景图像的相对位置的内容框 (从内容区开始显示背景图)

3、background-clip 背景裁切

说明:background-clip 属性规定背景的绘制区域。 属性值 border-box 背景被裁剪到边框盒。 默认值 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 扩展:text: 背景被裁剪到文字。说明:-webkit-background-clip: text; 使用时要加浏览器前缀

4、添加多张背景图:

语法:background:url(),url();

background:url(img/corner_lt.gif) no-repeat left top, url(img/corner_rt.gif) no-repeat right top, url(img/corner_rb.gif) no-repeat right bottom, url(img/corner_lb.gif) no-repeat left bottom;

background-color:#63ceff;

5、模糊:blur

filter : blur(value) 说明:值越大,越模糊;

6、图片边框属性:

border-image 属性是一个简写属性,用于设置以下属性: border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移(不加单位)。 border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) border-image-outset 边框图像区域超出边框的量(值是一个倍数或者具体的数值)

7、CSS圆角属性:

Border-radius:

语法:border-radius: 20px; 代表每个角的X轴的弧度和Y轴的弧度是一样的;

语法:border-radius: 20px/50px; 代表每个角的X轴的弧度是20px,Y轴的弧度是50px;

说明:10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X轴的弧度 ;“/ ”后 表示Y轴的弧度

用法: border-radius: 10px; 四个角的值都是10px; border-radius: 10px 20px; 值1:左上和右下 ;值2 :右上和左下 border-radius: 10px 20px 30px ; 值1:左上 ;值2 :右上和左下 ;值3:右下; border-radius: 10px 20px 30px 40px ; 值1:左上 ;值2 :右上和 ;值3:右下; 值 4:左下

8、css3 calc()(四则运算)

说明:width:calc(100% – 200px); width:calc(100% – 200px);

注:运算符前后必须要留空格; + – * / 加法和减法直接写数值就好; 乘法和除法 要写倍数 不用加单位 ;

9、pointer-events:阻止鼠标事件 、 穿透效果

pointer-events:none;

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/88265.html

(0)
上一篇 2024-10-09 14:26
下一篇 2024-10-13 18:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信