HTML和CSS入门（5）

本是古典何须时尚 2022-06-05 02:20 247阅读 0赞

## CSS3边框 ##

1.盒子阴影：box-shadow：h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) spread(模糊半径) color(颜色) inset(内阴影)  
其中水平偏移的值是正右负左，垂直偏移的值是正下负上。写这个属性的时候要注意浏览器的兼容性，所以要写带多个前缀的box-shadow属性。前缀有：-webkit，-ms，-o，-moz。  
优雅降级：先写总的后写各个类合。  
渐进增强：先写各个类合后写总。

2.文字阴影：text-shadow：h-shadow v-shadow blur color

3.图片边框：border-image：source（路径） slice（边径向内的距离） width outset repeat  
要注意的是，如果想要显示出图片边框的样式，首先要定义border：solid xpx ;这样图片边框的样式才能显示出来。

4.注册表样式：

<fieldset>
        <legend>excel</legend>
        <p></p>
    </fieldset>

![这里写图片描述][SouthEast]

5.圆角：radius：a 四角相同  
radius：a b 左上和右下 右上和左下  
radius：a b c 左上 右上和左下 右下  
radius：a b c d 左上 右上 右下 左下

6.多背景：background：url( )，url( ),url( );  
background-size:cover;(以最大程度放大，图片不一定完整)  
contain；（放大到合适状态，图片完整）  
100% 100%；（长宽填充，图片可能会变形）  
50px 50px；（精确像素）  
background-clip：content-box（在内容框内）  
padding-box（在填充区域内）  
border-box（默认值）  
background-attachment：local（以父元素的滚动而滚动）  
scroll（以页面的滚动条的滚动而滚动）  
fixed（不动，固定）  
7.渐变  
（1）线性渐变：background：liner-gradient（direction方向，c1，c2…）  
（2）径向渐变：background：radial-gradient（center，shape size，c1，c2…）  
size:closest-side最近的边  
farthest-side最远的边  
closest-corner最近的角  
farthest-corner最远的角

8.文本溢出

text-overflow: ellipsis;/*clip*/
        white-space:nowrap;
        overflow:hidden;

9.文本换行：word-break：break-all（单词内换行）

10.字体

@font-face { 
        font-family: newfont;/*自定义字体名字*/
        src：url（）
    }

引用时：

p{ font:25px newfont; }

11.多列：column-count：n；（n=1，2，3…）  
column-gap：npx；（间隔）  
column-rule：solid npx black；（分割线）  
**column：宽度 列数；**

12.用户界面：resize：none；禁掉文本框可拖拽的属性  
resize：both；使div可缩放大小  
horrzontal；水平放大缩小  
vertical；垂直变化

13.图片：（响应式）

img{ max-width: 100%;/*max-width=100%放大到原图大小后不再变化；width=100%放大到原图大小后继续放大*/ height:auto; }

[SouthEast]: /images/20220605/51272f8b60004992ab333392eaa0a96e.png