通过css样式来设置div各种形状

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cpongo3/article/details/88846647
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。

 圆形
要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID。
<div id="circle"></div>                              
圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
} 

最后编辑:2017-12-05
作者:APan
thum-c2001514733466.jpg
来自一个程序猿的经典独白
展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页