美化盒子

最新推荐文章于 2021-02-26 23:08:54 发布

a4565477141

最新推荐文章于 2021-02-26 23:08:54 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/hzwbw/p/11526060.html

版权

美化盒子

font-weight:文字加粗

只有bold（加粗有效），或者设置700（与bold效果相同），400是正常情况，100-900之间取整

font-style 属性定义字体的风格

letter-spacing 属性增加或减少字符间的空白（字符间距）

text-indent 属性规定文本块中首行文本的缩进

五、text-decoration 属性规定添加到文本的修饰

p:first-letter 伪元素：向段落的第一个字符添加特殊样式（span标签无效此元素应用于块级元素）

p:first-line 伪元素向文本的首行添加特殊样式。

应用外部字体

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	@font-face
	{
	font-family: "gn";
	src: url("fonts/晚安体.ttf");
	}
	p{ margin: 30px 200px;line-height: 2em;font-size:20px; padding: 20px; font-weight: bold;}
	p{font-family: "gn"}
	</style>
	</head>
	<body>
	<div>
	这是普通字体。。。。。
	</div>
	<p>
	该元素的字体设置：【font-family: "good night","sans-serif"】
	<br>
	本机并没有安装"good night"字体，它是如何被显示出来的呢？
	<br>
	是因为我在网页中使用了CSS的@font-face指令，加载了该字体，它的具体格式见网页源代码
	</p>
	</body>
	</html>

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

线性渐变：linear-gradient() 函数用于创建一个线性渐变的 "图像"。

透明度和通道

使用【opacity】属性，
可调整整个盒子的透明度
该属性的取值范围是0~1
其中，0表示全透明，1表示完全不透明

opacity: 0.5;

使用rgba颜色，可调整某个颜色的透明度，
rgba分别表示： r：red，g：green，b：blue，a：alpha
书写格式为：rgba(red, green, blue, alpha)
其中，alpha表示透明通道，取值是0~1之间
0表示全透明，1表示完全不透明

鼠标样式

text-shadow 属性向文本设置阴影。

text-shadow: h-shadow v-shadow blur color;

转载于:https://www.cnblogs.com/hzwbw/p/11526060.html

关注