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="" > <p>border-radius </p> <p>指定背景颜色圆角</p> <p>圆角</p> <p>指定边框元素圆角</p> <p>圆角</p> <p>指定背景图片圆角</p> <p>圆角</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; } </style> </head> <body> <div> 外阴影 </div> <div> 内阴影 </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; -o-border-image:url("img/1.jpg")30 30 round; border-image:url("img/1.jpg")30 30 round; } #stretch{ -webkit-border-image:url("img/1.jpg") 30 30 stretch; -o-border-image:url("img/1.jpg")30 30 stretch; border-image:url("img/1.jpg")30 30 stretch; } </style> </head> <body> <p>border-image属性用于设置图片的边框</p> <div> 这里图像平铺来填充该区域 </div> <br> <div> 这里图片拉伸以填充该区域 </div> <p>这里是我们使用的图片素材</p> <img src="img/1.jpg">
相关文章
精彩导读
热门资讯
关注我们
