Css3绘制圆形

最新推荐文章于 2024-05-27 14:48:10 发布

理个以哈呦

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量2.2k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_15253407/article/details/50605388

版权

css3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

/**通过box-shadow绘制圆形**/
基本语法是box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow属性的参数设置取值：

inset：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

h-shadow:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

v-shadow:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

blur ：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径(spread)：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
color ：扩充半径里面的填充颜色

这里写图片描述

/**绘制圆形代码**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html{
            color: #fff;
            font-family: 'Source Sans Pro', sans-serif;
            background-color: #59488b;
        }
        .time{
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            -webkit-box-shadow: inset 0px 0px 0px 2px #fff;
            -moz-box-shadow: inset 0px 0px 0px 2px #fff;
            box-shadow: inset 0px 0px 0px 2px #fff;
        }
    </style>
</head>
<body>
    <div class="time"></div>
</body>
</html>

效果图：
这里写图片描述

理个以哈呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3绘制圆形

/**通过box-shadow绘制圆形**/基本语法是box-shadow: h-shadow v-shadow blur spread color inset;box-shadow属性的参数设置取值：inset：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；h-shadow:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时
复制链接

扫一扫

专栏目录