border边框

最新推荐文章于 2024-06-24 11:02:57 发布

拙劣。

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量302

点赞数

分类专栏：边框

本文链接：https://blog.csdn.net/weixin_44017414/article/details/85090752

版权

边框专栏收录该内容

3 篇文章 0 订阅

订阅专栏

① border：粗细样式颜色（style：double双线 dashed虚线 dotted点状线条 solid实线）

②border-radius 圆角边框四个参数分别为：左上右上右下左下

③border-shadow 边框阴影四个参数分别为：左右上下效果颜色（例： 5px 5px 5px red）

④outline 边框轮廓（分为width、 color 、 style三部分 ) outline : none去掉边框轮廓

⑤当盒子宽高为0，四边border宽度相同时，可以形成三角形。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				width: 200px;
				height: 200px;
				background: lightblue;
				border: 10px solid red;
				/*border-width: 10px;*/
				/*border-style: solid;
				border-color: green;*/
				/*border-top-color: red;*/
				/*border-top: 10px red solid;
				border-left: 10px solid lawngreen;
				border-right: 10px solid lightblue;*/
				/*圆角*/
				border-radius: 10px 50px 80px 100px;
				/*border-radius:100px ;*/
				/*border-radius: 100%;*/
			}
			.box2{
				width: 200px;
				height: 100px;
				border: 6px solid red;
				border-radius: 20px 50px/50px 60px;
				border-bottom-left-radius: 80px;
			}
			.box2:hover{
				box-shadow: 10px 10px 10px gray;
			}
			/*input被鼠标点击*/
			input:focus{
				outline: 2px solid red;
				background: lightblue;
				
			}
			
			
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<input type="text" name="" id="" value="" />
		<input type="button" name="" id="" value="按钮" />
		
	</body>
</html>

运行效果如下:图二带有阴影，input设置了边框轮廓

拙劣。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border边框

① border：粗细样式颜色（style：double双线 dashed虚线 dotted点状线条 solid实线）②border-radius 圆角边框四个参数分别为：左上右上右下左下③border-shad...
复制链接

扫一扫