css3属性

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

        在单词内部换行
        word-wrap:;
            normal  默认值,不允许在单词内部换行
            break-word  允许在单词内部换行
             
        word-break:;
            break-all   允许在单词内部换行
            keep-all    允许在换行点换行,单词内部不换行
             
        box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选);
            默认影子在外面(忽略不写)
            设置影子在内部( inset )
             
        box-shadow:第一层阴影,第二层阴影,第三层阴影;

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

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

彩色图标:
1: 引入外部iconfont.js文件
2: 在style中添加
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
3:


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 适应元素撑起来的最小宽度