Home > Article > Web Front-end > 使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:011311browse
使用box-shadow属性实现圆角效果代码实例:
通常实现圆角效果我们使用border-radius，其实我们也可以使用box-shadow属性来实现。
两个属性的具体用法这里就不多介绍了，具体可以参阅以下两个文章:
（1）.圆角效果可以参阅CSS3实现圆角效果一章节。
（2）.box-shadow可以参阅CSS3的box-shadow属性用法详解一章节。
代码实例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.antzone{ margin:100px; width:100px; height:100px; border-radius:1px; box-shadow:0 0 0 30px #cd0000;}</style></head><body><div class="antzone"></div></body></html> 上面的代码实现了我们的要求，下面简单做一下介绍。
设置元素的长宽均是100px，并且border-radius值是1px，也就是元素本身有一定的圆角效果，这当然是由用处的。
如果box-shadow的值是::0 0 0 0 #cd0000，那么投影正好和元素重合的。
但是我们将扩展效果设置为30px，那么就是向外扩展了30px，那么圆角效果也就很明显了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18266
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3实现的气泡效果代码实例_html/css_WEB-ITnoseNext article：春节酷站系列！Distill提供可免费商用的高质量影片素材_html/css_WEB-ITnose