星空网 > 软件开发 > 网页设计

CSS3新属性注释及实例

这里把CSS3的新属性单独拿出来讲解一下:

border-radius 属性用于创建圆角

div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}

  

border-shadow 用于向方框添加阴影

div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}

  

border-image 属性允许您规定用于边框的图片

div{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */}

  

background-size 属性规定背景图片的尺寸

div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}

  

background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向上平铺
repeat: 背景图像在横向和纵向平铺
no-repeat: 背景图像不平铺
round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3)
space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

background-origin 属性规定背景图片的定位区域
背景图片可以放置于 content-box、padding-box 或 border-box 区域


text-shadow 可向文本应用阴影

h1{text-shadow: 5px 5px 5px #FF0000;}

  

word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分


在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

  

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Opera */}

  

尚不全,后续更新。推荐链接:http://www.w3school.com.cn/css3/index.asp




原标题:CSS3新属性注释及实例

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

超170条货柜被查扣!又一批跨境卖家被踢出局:https://www.kjdsnews.com/a/1454291.html
一文读懂加拿大的 GST/HST 税务欺诈:https://www.kjdsnews.com/a/1454292.html
110家亚马逊店铺被冻结!又一关键词起诉侵权,listing上不能出现!:https://www.kjdsnews.com/a/1454293.html
开拓墨西哥市场,注册RFC税号需要注意什么?:https://www.kjdsnews.com/a/1454294.html
独家丨SHEIN将在墨西哥建厂:https://www.kjdsnews.com/a/1454295.html
朴西(POSEE)出海记:一双拖鞋走全球:https://www.kjdsnews.com/a/1454296.html
​TikTok发生了什么?美区增长首次停滞,准入管理力度加大:https://www.kjdsnews.com/a/1836407.html
2024年如何找到在TikTok上发帖的最佳时间:https://www.kjdsnews.com/a/1836408.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流