关于CSS3的一些相关样式

开心就来soul

已于 2022-03-22 10:29:41 修改

阅读量383

点赞数 2

文章标签： css3 javascript 前端 html css

于 2022-03-16 20:58:44 首次发布

本文链接：https://blog.csdn.net/m0_67316947/article/details/123528624

版权

人生天地之间，若白驹过隙，忽然而已。

今天的主要内容有CSS3中的文字和文本相关样式、背景和边框相关样式

文字和文本相关样式

1、文本阴影 text-shadow

text-shadow属性适用于文本阴影，它的一些属性值如下：

h-shadow 水平阴影的位置

v-shadow 垂直阴影的位置

blur 模糊的距离,即阴影的大小范围，这个值越大，则越模糊。

color 阴影的颜色

tips:其中，h-shadow和v-shadow为必须要写的，不可省略

2、CSS3 @font-face规则

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体，每个人的电脑里安装的字体也是因人而异的，所以用着非常不方便。而@font-face的诞生，为web设计师带来了极大的方便。

通过CSS3，设计师可以使用他们喜欢的任意字体。当找到希望使用的字体时，可将该字体文件存到web服务器上，它会在需要的时候下载到用户的计算机上。它的使用规则如下：

在@font-face中，font-family定义字体的名称，src为字体资源的路径。

<style>

@font-face{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

}

div{

font-family:myFirstFont;

}

</style>

下面就以毛泽东的字体举例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		@font-face {
			font-family:"maoti";
			src: url("font/maozedong.ttf");
		}
		
		.box{
			font-family: "maoti";
		}
		</style>
	</head>
	<body>
		<div class="box">
			《诉衷肠 赠周恩来》<br>
			当年忠贞为国酬，何曾怕断头？<br>
			如今天下红遍，江山靠谁守？<br>
			业未就，身躯倦，鬓已秋。<br>
			你我之辈，忍将夙愿，付与东流？<br>
			
		</div>
	</body>
</html>

运行截图如下：

背景和边框样式

圆角边框 border

border-radius:值1 四个角都一样

border-radius: 值1 值2 值1表示左上角、右下角；值2表示右上角、左下角

border-radius: 值1 值2 值3 值1表示左上角；值2表示右上角、左下角；值3表示右下角

border-radius:值1 值2 值3 值4 分别为左上角、右上角右下角、左下角

边框阴影 box-shadow

在CSS3中，box-shadow由于为边框添加阴影

语法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影半径] [阴影颜色][投影方式]；

渐变

渐变分为线性渐变和径向渐变

线性渐变

什么是线性渐变？

CSS3 渐变（gradients）是让两个或多个指定的颜色之间显示平稳过渡。

其格式如下：

background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)

可以通过角度来确定渐变的方向

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>

<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

运行结果如下：

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>

</body>
</html>

径向渐变

径向渐变由它的中心定义。

其语法格式如下：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>