用CSS3画出一个圆

  最近逛点点网，发现有两个圆（貌似是用于查看关注状态的东东）挺好看的，起初以为是图片，结果用工具一看居然都是用纯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

 

posted @   cuitsl  阅读(445)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
友情博客：大熊的外星球
点击右上角即可分享
微信分享提示