CSS3入门之阴影、边框一系列属性

作者: 码农修行之路 | 来源:发表于2020-12-17 23:21 被阅读0次

CSS3入门之阴影、边框一系列属性
CSS3基础
06. 更个性的边框
css之border
css3学习第一天
css3新增的属性
CSS3新增属性
一篇搞清CSS3边框新增的属性
CSS3边框、背景、文本效果、字体
好程序员web前端培训分享CSS3 边框

文字阴影、盒子阴影、边框样式

文字阴影分别是水平阴影（可负值负值影子往左移）垂直阴影（可负数负值影子往上移）模糊效果影子颜色
盒子阴影分别是水平阴影（可负值负值影子往左移）垂直阴影（可负数负值影子往上移）模糊效果阴影大小影子颜色阴影位置（inset outset(默认)）
多组阴影以逗号分割
边框颜色分别代表上右下左 border-color: #f00 #0f0 #00f yellow;
圆形图片设置边框圆角值取宽高中最大值的壹伴
半圆高度为宽度的一半并且高度和边框圆角的度数一致根据想要的效果设置不同方位的角值
背景大小 background-size 有两种属性 cover（覆盖按比例缩放覆盖整个区域时可能会被裁剪） contain（容纳背景全部显示可能不会全部覆盖背景区域）
背景剪切三种主要属性
border-box：从边框border开始剪切（默认值）
content-box 从内容区域开始剪切
padding-box 从内边距padding开始剪切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        
        .box {
            padding: 100px 100px;
            font-size: 50px;
            font-family: "宋体";
            color: skyblue;
            /* 文字阴影 分别是 水平阴影（可负值 负值影子往左移） 垂直阴影（可负数 负值影子往上移） 模糊效果 影子颜色 */
            /* 多组阴影 以逗号分割 */
            text-shadow: 6px 6px 5px #666;
        }

        .box1 {
            width: 200px;
            height: 200px;
            margin-left: 100px;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            font-family: "楷体";
            /* 圆角效果 */
            border-radius: 10px;
            /* 盒子阴影 分别是 水平阴影（可负值 负值影子往左移） 垂直阴影（可负数 负值影子往上移） 模糊效果 阴影大小 影子颜色 阴影位置（inset outset(默认)） */
            /* 多组阴影 以逗号分割 */
            box-shadow: 6px 6px 5px 5px #666;

            /*border: 5px solid #000;*/
            border-width: 10px;
            border-style: dashed;
            /* 边框颜色 分别代表上 右 下 左 */
            border-color: #f00 #0f0 #00f yellow;
        }

        img {
            border: 1px solid #00ff00;
            border-radius: 100px;
        }

        /*
            单独写：
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            border-bottom-right-radius:10px;
            border-bottom-left-radius:10px;
            简写形式:
            order-radius: 10px 10px 10px 10px;
        */

        /* 上半圆 */
        /* 需要高度为宽度的一半 并且高度和边框圆角的度数一致 根据想要的效果设置不同方位的角值 */
        .cir_top {
            width: 100px;
            height: 50px;
            background-color: #333;
            /* 值分别是 左上 右上 右下 左下 */
            border-radius: 50px 50px 0px 0px;
        }
        /* 右半圆 */
        .cir_right {
            width: 100px;
            height: 200px;
            background-color: #333;
            border-radius: 0px 100px 100px 0px;
        }

        .img_bg {
            width: 260px;
            height: 260px;
            border: 2px solid red;
            background-repeat: no-repeat;
            background-image: url("../img/android.png");
            /* 设置背景宽高 */
            /*background-size: 100px 200px;*/
            /* background-size 有两种属性 cover（覆盖 按比例缩放 覆盖整个区域时可能会被裁剪） contain（容纳 背景全部显示 可能不会全部覆盖背景区域） */
            background-size: contain;
        }

        /* 背景剪切 */
        .bg_clip {
            width: 300px;
            height: 300px;
            border:1px solid red;
            background-image: url("../img/android.png");
            background-repeat: no-repeat;
            /* border-box 从边框border开始剪切 默认值 */
            /*background-clip: border-box;*/
            /* content-box 从内容区域开始剪切 */
            /*background-clip: content-box;*/
            /* padding-box 从内边距padding开始剪切 */
            background-clip: padding-box;
        }

    </style>
</head>
<body>

    <div class="box">我是盒子</div>

    <div class="box1">我是盒子</p>

    <img src="../img/android.png">

    <div class="cir_top"></div>

    <div class="cir_right"></div>

    <div class="img_bg">
        
    </div>

    <div class="bg_clip"></div>

</body>
</html>