博学谷 - CSS笔记10 - 圆角边框,盒子阴影,文字阴影

最新推荐文章于 2022-10-14 19:36:25 发布

hecr_mingong

最新推荐文章于 2022-10-14 19:36:25 发布

阅读量110

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/hecr_mingong/article/details/111640918

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.圆角边框
语法:

border-radius:length;

参数值可以用数值或者百分比表示
该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角,顺时针表示

demo:

        div {
            width: 200px;
            height: 50px;
            border: 1px solid red;
            /* 水平居中显示 */
            margin: 100px auto;
            /* 1.设置半径为20px的圆角 */
            /* border-radius: 20px; */
            /* 2.设置一个椭圆 */
            /* border-radius: 50%; */
            /* 3.设置左上角,右下角半径为30px;右上角,左下角半径为10px的圆角 */
            /* border-radius: 30px 10px; */
            /* 4.设置左上角10px;右上角,左下角为20px;右下角为30px的圆角 */
            /* border-radius: 10px 20px 30px; */
            /* 5.设置左上角5px,设置右上角10px,右下角15px,左下角20px的圆角*/
            border-top-left-radius: 5px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 20px;
        }

    <div></div>

效果:
在这里插入图片描述

2.盒子阴影
语法:

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须,水平阴影的位置,允许负值
v-shadow	必须,垂直阴影的位置,允许负值
blur	可选,模糊距离
spread	可选,阴影的尺寸
color	可选,阴影的颜色
inset	可选,将外部阴影内部阴影

demo:

        div {
            height: 200px;
            width: 200px;
            background-color: red;
            margin: 200px auto;
            /* 1.设置水平阴影10px,垂直阴影20px 模糊距离30px 阴影的尺寸40px 颜色黑色并且透明度0.3,默认是外阴影 */
            /* box-shadow: 10px 20px 30px 40px rgba(0, 0, 0, .3); */
            /* 2.设置水平阴影10px,垂直阴影20px 模糊距离30px 阴影的尺寸40px 颜色黑色并且透明度0.3,设置成内阴影 */
            box-shadow: 10px 20px 30px 40px rgba(0, 0, 0, .3) inset;
        }

    <div></div>

效果:
在这里插入图片描述

3.文字阴影
语法:

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必须,水平阴影的位置,允许负值
v-shadow	必须,垂直阴影的位置,允许负值
blur	可选,模糊距离
color	可选,阴影的颜色

demo:

        p {
            font-size: 30px;
            color: orange;
            /* 让文字水平居中显示 */
            text-align: center;
            /* 文字阴影水平距离10px,垂直距离20px,阴影距离5px,颜色黑色并且透明度0.5 */
            text-shadow: 10px 20px 5px rgba(0, 0, 0, .5);
        }