css3属性

最新推荐文章于 2023-12-02 13:14:53 发布

Unfortunatelyif

最新推荐文章于 2023-12-02 13:14:53 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/Unfortunatelyif/article/details/105633479

版权

1 border-radius 圆角

div{
			width: 400px;
			height: 400px;
			background-color: #f15c40;
			float: left;
			margin-left: 20px;
			margin-top: 20px;
		}
		.div0{
			border-radius: 5px;
		}
		.div1{
			border-radius: 1em;
		}
		.div2{
			border-radius: 50%;
		}
		.div3{
			border-radius: 20% 50%;
		}
		.div4{
			border-radius: 20% 40% 60%;
		}
		.div5{
			border-radius: 10% 20% 30% 40%;
		}
1、border-radius的值可以为绝对单位px，和相对单位em，rem，也可以为百分比，值越大，弧度越大。 
2、属性值位数不同时，表现也不同。 
3、也可以设置单个角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。

在这里插入图片描述

2 box-shadow 阴影


1、box-shadow: X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色; 
2, X轴和Y轴的偏移值可以为负，但不能共用一个，X轴和Y轴的阴影半径可以共用一个，但是不能为负。 

.div0{
			border-radius: 5px;
			box-shadow: 0 0 10px 10px #666;
		}
		.div1{
			border-radius: 1em;
			box-shadow: -10px -10px 5px 5px #666;
		}
		.div2{
			border-radius: 50%;
			box-shadow: 10px 10px 5px 5px #666;
		}
		.div3{
			border-radius: 20% 50%;
			box-shadow:  0 20px 20px #666;
		}

在这里插入图片描述

3 背景图片 background-image

现在 background-image可以为一个元素添加多个图片了

div{
			width: 1200px;
			height: 800px;
			margin: 0 auto;
			background-image: url(111.jpg), url(222.jpg);
			background-position: 0 0, 500px 0; /*图片定位*/
			background-repeat: no-repeat; /*不平铺*/
		}

在这里插入图片描述

4 background-attachment 背景图片固定

/*background-attachment的三个属性
fixed 元素和网页的滚动条滚动都不会动
scroll 滚动条动背景图不动
local 相对于类容定位 类容动背景图跟着动
*/
background-attachment ：fixed；

5 background-origin 规定背景图片的定位区域

/*background-origin 的三个属性
padding-box 从内边距开始显示图片
content-box 从内容开始显示图片
border-box 从外边距开始显示图片
*/
background-origin ：padding-box ；

4 background-clip 规定背景的绘制区域

<style type="text/css">
	div{
			float:left;
			margin:30px;
			width: 150px;
			height: 200px;
			background: yellow;
			border: 20px solid rgba(0, 0, 0, 0.1);
			padding: 20px;
}
	.div0{
		 background-clip:content-box;
	}
	.div1{
		background-clip:padding-box;
	}
	.div2{
		 background-clip:border-box;
	}
	</style>
</head>
<body>
	<div class="div0">时间真的是这个世界上最好的跨度，让惨痛变得苍白，让执着的人选择离开，然后历经沧桑人来人往，你会明白，万般皆是命，半点不由人。</div>
	<div class="div1">时间真的是这个世界上最好的跨度，让惨痛变得苍白，让执着的人选择离开，然后历经沧桑人来人往，你会明白，万般皆是命，半点不由人。</div>
	<div class="div2">时间真的是这个世界上最好的跨度，让惨痛变得苍白，让执着的人选择离开，然后历经沧桑人来人往，你会明白，万般皆是命，半点不由人。</div>
</body>

在这里插入图片描述

1 text-shadow 文本阴影

规则跟box-shadow类似，text-shadow：X轴偏移值，Y轴偏移值，阴影模糊半径，颜色。

.div0{
		 background-clip:content-box;
		 text-shadow: 5px 5px 5px #ccc;
	}
	.div1{
		background-clip:padding-box;
		text-shadow: -5px -5px 10px black;
	}

在这里插入图片描述

2 word-wrap | word-break 是否允许长单词换行

word-wrap: normal(只允许断点字换行) | break-word(如果单词过长，截断强制换行) 
word-break: normal(浏览器默认的换行规则，一般是不允许长单词内部换行) | break-all（允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);
.div0{
		 word-wrap: normal;
	}
	.div1{
		word-wrap: break-word;
	}
	.div2{
		 word-break: keep-all;
	}
	.div3{
		 word-break: break-all;
	}

在这里插入图片描述

3 letter-spacing 字符的间隙


	.div1{
		letter-spacing: 8px;
	}

在这里插入图片描述

Unfortunatelyif

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3属性

1 border-radius 圆角div{ width: 400px; height: 400px; background-color: #f15c40; float: left; margin-left: 20px; margin-top: 20px; } .div0{ border-radius: 5px; } .div1{ ...
复制链接

扫一扫