box-shadow和颜色渐变

来源：互联网发布：软件源代码保密协议编辑：程序博客网时间：2024/06/06 14:09

box-shadow和颜色渐变

双引号实现的元素（内联元素）
blockquote：before{content：open-quote} 显示双引号的前半部分
blockquote：after{content：open-quote} 显示双引号的后半部分
可以在大括号里设置双引号的字体属性

背景图片边框的设置
border-image：url（）30（注意其后不跟单位，默认为px）steetch（可以不写，默认拉伸）
取值是从上、右、下、左的顺序，如30 30 30 30，repeat（重复） round（平铺）——两者的显示效果一样
若不取值，这只会在边框的四个角显示图片
范例：

<!DOCTYPE html><html><head><title>border</title><meta charset="utf-8"><style type="text/css">.div_border-img{width: 200px;height: 100px;background: #e43;/*border:30px solid; */border-width: 30px;border-image: url(11.jpg) 15 30 30 30 repeat;}</style></head><body><div class="div_border-img"></div></body></html>

阴影设置
border-shadow：0 0 0 red；（左右、上下、模糊度，不能用百分比取值）
border-shadow：0 0 0 0 red；（第四个值是放大缩小，负缩小，正放大）
当要有多个阴影时，用逗号隔开再进行取值

颜色渐变的设置
background：-webkit-gradient（linear，0,0,0%，50%，from（color），to（color）；）（第一个取值为倾斜度渐变deg角度单位，第二个取值为长度渐变，px为单位）
简写：background：linear-gradient(red，yellow) linear为线性变化颜色，从red渐变为yellow
background：linear-gradient(2deg,red 20px,yellow) 颜色也可以用rgb（2 2 2）或是rgba（2 2 2 30）为透明取颜色（里面的第四个取值为透明度取值）
linear为线性变化，radial为不均匀变化
可以增加多个颜色，注意后面的百分比 > 前面的百分（百分比写在颜色的后面）

css布局注意事项

1、先要有总体布局思路，脑子不要混乱
2、再进行小块小块的布局，要进行计算长和宽（学会使用百分比100%的应用）
3、要心平气和的，不要浮躁

0 0