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>
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;
}