用CSS3画出一个圆

最新推荐文章于 2023-11-21 22:54:22 发布

angren3519

最新推荐文章于 2023-11-21 22:54:22 发布

阅读量309

点赞数 2

文章标签： xhtml 前端 ViewUI

原文链接：http://www.cnblogs.com/cuitsl/archive/2011/11/27/2265008.html

版权

最近逛点点网，发现有两个圆（貌似是用于查看关注状态的东东）挺好看的，起初以为是图片，结果用工具一看居然都是用纯css样式画出来的，赶快学习了下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
    #test
{
        width:57px; height:57px; border:1px solid black;
        background-color:#66BDFF;
        position:absolute;
        border-top-left-radius:28px;
        border-top-right-radius:28px;
        border-bottom-left-radius:28px;
        border-bottom-right-radius:28px;
        filter:alpha(opacity=54);
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

前端能用css实现的就都尽量不用图片吧，虽然不是做前端的，但是还是值得学习学些。具体的文档可以参考这里http://dotnet.aspx.cc/CSS3/border-top.htm

转载于:https://www.cnblogs.com/cuitsl/archive/2011/11/27/2265008.html

angren3519

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用CSS3画出一个圆

最近逛点点网，发现有两个圆（貌似是用于查看关注状态的东东）挺好看的，起初以为是图片，结果用工具一看居然都是用纯css样式画出来的，赶快学习了下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
复制链接

扫一扫