box-shadow和颜色渐变

最新推荐文章于 2024-05-06 18:33:05 发布

frost08ds

最新推荐文章于 2024-05-06 18:33:05 发布

阅读量9.3k

点赞数

分类专栏： CSS 文章标签： box-shadow和backgroun

本文链接：https://blog.csdn.net/frost08ds/article/details/40115541

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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、要心平气和的，不要浮躁