首页 > 代码库 > CSS3样式中新添加的属性
CSS3样式中新添加的属性
border-radius：允许向元素添加圆角
<style type="text/css"> #r1{ border-radius:25px; background:blue; padding:20px; width:200px; height:150px; } #r2{ border-radius:25px; border:2px solid green; padding:20px; width:200px; height:150px; } #r3{ border-radius:25px; background:url("img/1.jpg"); background-position:left top; background-repeat:repeat; padding:20px; width:200px; height:150px; } </style> </head> <body> <form action="" id="myform" > <p>border-radius </p> <p>指定背景颜色圆角</p> <p id="r1">圆角</p> <p>指定边框元素圆角</p> <p id="r2">圆角</p> <p>指定背景图片圆角</p> <p id="r3">圆角</p> </form> </body>
box-shadow：阴影
<style type="text/css"> #div1{ width:200px; height:100px; background:yellow; box-shadow:10px 10px 5px 5px gray;/* 阴影*/ } #div2{ width:200px; height:100px; background:yellow; box-shadow:10px 10px 5px 5px inset;/* 阴影 inset内阴影*/ } </style> </head> <body> <div id="div1"> 外阴影 </div> <div id="div2"> 内阴影 </div> </body>
设置多层阴影
box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多层阴影*/
border-image属性用于设置图片边框
<style type="text/css"> div{ width:250px; padding:10px 20px; border:15px solid transparent; } #round{ -webkit-border-image:url("img/1.jpg") 30 30 round; /* -webkit是google浏览器内核支持所需要 ,round是平铺的意思*/ -o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera浏览器内核支持所需要的前缀*/ border-image:url("img/1.jpg")30 30 round; } #stretch{ -webkit-border-image:url("img/1.jpg") 30 30 stretch; /* -webkit是google浏览器内核支持所需要 stretch是拉伸 */ -o-border-image:url("img/1.jpg")30 30 stretch;/* -o是Opera浏览器内核支持所需要的前缀*/ border-image:url("img/1.jpg")30 30 stretch; } </style> </head> <body> <p>border-image属性用于设置图片的边框</p> <div id="round"> 这里图像平铺来填充该区域 </div> <br> <div id="stretch"> 这里图片拉伸以填充该区域 </div> <p>这里是我们使用的图片素材</p> <img src="http://www.mamicode.com/img/1.jpg">
CSS3样式中新添加的属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。