4.1圆角边框 box-shadow:盒子阴影文本阴影线性渐变径向渐变

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

池布旁

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

阅读量1.1k

点赞数

分类专栏： CSS层叠样式表文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_63692368/article/details/123101233

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

4.1圆角边框
Border:1px solid black; 方形的边框
圆角边框属性 border-radius 可以以像素为单位也可以以百分比或者是em为单位

圆角边框:

border:5px solid black;
		border-radius: 360px;/*圆角边框*/
		outline-style: solid;/*Outline属性:轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素；  outline-style 属性指定轮廓的样式（solid表示实线）*/
		outline-color: gold;
		outline-width: 30px;
		opacity: 0.7;/*opacity:属性指定元素的不透明度/透明度 (属性的取值范围为 0.0-1.0。值越低，越透明：) */

文本阴影:text-shadow:

span{
		font-size: 72px;
		text-shadow:4px 5px 6px blue;/*文本阴影:text-shadow:    4px:水平; 5px:垂直; 6px:阴影添加模糊效果(可不写模糊效果);  blue:颜色(可不写颜色)*/
	}

box-shadow(盒子阴影):

#one{
		width: 200px;
		height: 200px;
		background-image: linear-gradient(to right, green,red,yellow);
		box-shadow: 10px 10px 5px grey;/*box-shadow:表示盒子阴影(指定水平阴影和垂直阴影)  5px:模糊度(可以不写) (grey也可以不写)*/
	}/*

线性渐变:

#one{
		width: 200px;
		height: 200px;
		background-image: linear-gradient(to right, green,red,yellow);
		}线性渐变:必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。 您还可以设置起点和方向（或角度）以及渐变效果。(默认是从上到下)
	                                                                              例如:to bottom right表示左上到下右
	  如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）
	  例如:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));(从左开始的线性渐变。它开始完全透明，然后过渡为全色红色)*/

径向渐变：

 #two{
	  	width: 200px;
		height: 200px;
		/*background-image:radial-gradient(green,red,yellow);/*background-image:radial-gradient:径向渐变由其中心定义。必须定义至少两个色标*/
		background-image: repeating-radial-gradient(red, yellow 10%, green 15%);/*可以不设置百分之多少，设置了表示某个颜色占百分之多少的比例
		                                                                          repeating-radial-gradient   表示重复的径向渐变*

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	img{
		border:5px solid black;
		border-radius: 360px;/*圆角边框*/
		outline-style: solid;/*Outline属性:轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素；  outline-style 属性指定轮廓的样式（solid表示实线）*/
		outline-color: gold;
		outline-width: 30px;
		opacity: 0.7;/*opacity:属性指定元素的不透明度/透明度 (属性的取值范围为 0.0-1.0。值越低，越透明：) */
	}

	span{
		font-size: 72px;
		text-shadow:4px 5px 6px blue;/*文本阴影:text-shadow:    4px:水平; 5px:垂直; 6px:阴影添加模糊效果(可不写模糊效果);  blue:颜色(可不写颜色)*/
	}


	</style>
</head>
<body>
	<img src="./image/2.jpg">
	<span>文本阴影效果</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	#one{
		width: 200px;
		height: 200px;
		background-image: linear-gradient(to right, green,red,yellow);
		box-shadow: 10px 10px 5px grey;/*box-shadow:表示盒子阴影(指定水平阴影和垂直阴影)  5px:模糊度(可以不写) (grey也可以不写)*/
	}/* background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
	    线性渐变:必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。 您还可以设置起点和方向（或角度）以及渐变效果。(默认是从上地下)
	                                                                              例如:to bottom right表示左上到下右
	  如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）
	  例如:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));(从左开始的线性渐变。它开始完全透明，然后过渡为全色红色)*/

	  #two{
	  	width: 200px;
		height: 200px;
		/*background-image:radial-gradient(green,red,yellow);/*background-image:radial-gradient:径向渐变由其中心定义。必须定义至少两个色标*/
		background-image: repeating-radial-gradient(red, yellow 10%, green 15%);/*可以不设置百分之多少，设置了表示某个颜色占百分之多少的比例
		                                                                          repeating-radial-gradient   表示重复的径向渐变*/
	  }
	</style>
</head>
<body>
	<div id="one"></div>
	<hr>
	<div id="two"></div>
</body>
</html>