CSS3 新特性 box-shadow 阴影效果、圆角border-radius

圆角


使用CSS3 border-radius属性,你可以给任何元素制作"圆角",border-radius属性,可以使用以下规则:

(1)四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角

(2)三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角

(3)两个值:第一个值为左上角与右下角,第二个值为右上角与左下角

(4)一个值:四个圆角值相同

如果想要图形变为圆角效果,只需要添加一个属性就行了,border-radius 这个属性。如果想圆的厉害那么这个值就变大一些。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
       div{
            width: 100px;
            height: 100px;
            background-color: rgb(151, 26, 49);
            border-radius: 10px;
       }

       img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
       }
    </style>
</head>
<body>
   <div>
    <img src="../vue/1.jpg">
   </div>
</body>

</html>

如果想要变为圆形,那么就写100%就行了。

box-shadow 阴影效果


margin: 0 auto:上下不需要管,auto是让左右的空间平均分配,然后让盒子在中间,这就是居中。让左右空间的间隙平均分配就是auto的作用。

0代表水平方向没有阴影,第二个0代表垂直方向没有阴影,第三个是阴影的模糊度。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background-color: greenyellow;
            margin: 0 auto;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="d1">
    </div>
</body>

</html>
相关推荐
未来之窗软件服务6 小时前
internationalization 全球系统风格分享,新加坡,墨西哥,泰国,印度,越南—仙盟创梦IDE
css·css3·收银系统开发·仙盟创梦ide·东方仙盟·全球化布局
YUJIANYUE3 天前
html5+css3+canvas长文转长图工具支持换行
前端·css3·html5
全球网站建设5 天前
从结构到交互:HTML5进阶开发全解析——语义化标签、Canvas绘图与表单设计实战
javascript·前端框架·php·reactjs·css3·html5
萱萱的七彩鱼6 天前
css3之三维变换详说
前端·javascript·css3
代码的余温9 天前
CSS3文本阴影特效全攻略
前端·css·css3
伍哥的传说10 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
smile boy10 天前
个人财务记录应用
前端·javascript·css·css3·html5
Java&Develop12 天前
学生信息管理系统 - HTML实现增删改查
css·html·css3
说学逗唱攻城狮13 天前
css3地球转动模型(动态数据)
前端·css·css3
爱吃派大星的土拨鼠13 天前
HTML结构解析
前端·html·css3