2020.03.19笔记：文本阴影、background应用、@font-face-优快云博客

本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/104980203

文本阴影:
text-shadow:水平阴影垂直阴影模糊度颜色;
多层文本阴影的设置
text-shadow:第一层阴影,第二层阴影,第三层阴影;

在单词内部换行
word-wrap:;
normal 默认值,不允许在单词内部换行
break-word 允许在单词内部换行

    word-break:;
       break-all   允许在单词内部换行
       keep-all    允许在换行点换行,单词内部不换行

box-shadow:水平阴影垂直阴影模糊度阴影大小颜色内外阴影(可选);
默认影子在外面(忽略不写)
设置影子在内部( inset )

box-shadow:第一层阴影,第二层阴影,第三层阴影;

方式一: 在本地引入
1: 去官网下载
2: 在页面引入外部css文件
3: 挑选对应的类名

        方式二:在线引入
        1: 在页面引入链接地址
        2: 挑选对应的类名
        3: 去官网下载
        4: 修改引入css文件的路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_1700510_buojade7274.css" />
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 350px;
                height: 70px;
                border:1px solid red;
                margin: 100px;
                background: #ccc;
            }
            input{
                float:left;
                width: 250px;
                height: 70px;
                border:none;
                text-indent:20px;
            }
            .btn{
                float:right;
                width: 100px;
                height: 70px;
                background: skyblue;
                font-size:30px !important;
                text-align: center;
                line-height: 70px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" placeholder="请输入商品名称" />
            <div class="iconfont icon-fangdajing2 btn"></div>
        </div>
    </body>
</html>

彩色图标:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            p{
                width: 200px;
                height: 100px;
                background: pink;
                margin: 100px;
            }
            .icon {
                width: 1em;
                height: 1em;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript" src="more/iconfont.js"></script>
    </head>
    <body>
        <p></p>
         
        <!--
            彩色图标:
                1: 引入外部iconfont.js文件
                2: 在style中添加
                .icon {
                    width: 1em;
                    height: 1em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }
                3:  <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-名字"></use>
                    </svg>
        -->
         
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiao2"></use>
        </svg>
    </body>
</html>

background-origin:背景图起点位置;
padding-box 起点从内边距开始
border-box 起点从边框开始
content-box 起点从内容区域开始

        background-clip:;背景图裁剪
            border-box  从边框位置开始裁剪
            padding-box 从内边距区域开始裁剪
            content-box 从内容区域开始裁剪
             
        background-size:;背景图大小
            % px 
            第一个值 水平大小
            第二个值 垂直大小
            如果只给一个值,宽高等比例缩放
            cover   等比例缩放,铺满元素
            contain 等比例缩放,某一个方向铺满元素
             
        background:url(),url(),url();多张背景图效果

颜色单词 red blue green
十六进制 #000000 #ff0000 #ffffff
rgb()
rgba(0,0,0,0)
r red 0-255
g green 0-255
b blue 0-255
a alpha 0-1 透明

        hsl(0,100%,50%):
        hsla(200,70%,70%,0.6):
            h 色调    0-360
            s 饱和度   0%-100%
            l 亮度    0%-100%
            a 透明    0-1
             
         
    边框图片:
        border-image-source:url("图片地址");
            默认在元素的四个角落
             
        border-image-slice:垂直显示 水平显示;
            显示图片的区域范围
            没有单位,不能为负数
            按照九宫格的切法来显示图片
            数值越小,切的越少,图片会放大
            数值越大,切得越多,图骗效果相对缩小
             
        border-image-repeat:;
            repeat  从中间往两头平铺
            round   从一头往另一头平铺
            stretch 拉伸(有可能会变形)

圆角:圆角变化呈顺时针变化
border-radius:四个角;
border-radius:左上右下右上左下;
border-radius:左上右上左下右下;
border-radius:左上右上右下左下;
px %

        border-radius:水平圆角/垂直圆角;

width:; height:;
-webkit-fill-available
让元素自适应父元素的宽度或者高度
fit-content 让一个元素适应内容的一个宽度

            max-content 适应元素撑起来的最大宽度
            min-content 适应元素撑起来的最小宽度