border-radius ,box-shadow边框阴影效果

最新推荐文章于 2024-04-17 21:07:38 发布

xqiitan

最新推荐文章于 2024-04-17 21:07:38 发布

阅读量2.6k

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/88124538

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

border-radius 可实现，圆形，半圆，椭圆，圆角方形等UI效果。

border-radius 边框圆角，当border-radius为正方形宽度的一般，就截取一个圆形。
如果是一个长方形，border-radius是较窄的宽度的一半，就会截取一个圆角矩形
椭圆：‘/’ 斜杠-用来设置单个角，不同方向的半径值。
border-radius:100px/50px; // 水平x方向、垂直y方向。
// 做1/4个椭圆
border-top-right-radius:100px 50px;
//设置某个角点的两个方向上的不同圆角。
border-top-right-radius:100px 50px;
border-bottom-left:80px 40px;
border-bottom-right: 60px 30px;
border-top-left:40px 20px;
// 如果想设置四个角点的不同方向上的不同圆角值：
// 分别是水平方向的四个值，垂直方向的四个值。
border-radius:100px 80px 60px 40px/50px 40px 30px 20px;
// 100px与50px组合，成为左上角。以此类推。

// border-上下-左右-radius：
border-top-right-radius: 50px; // 添加某个方向角的圆角。
border-bottom-left-radius: 50px;
border-radius:5px; //设置1个值，四个角的值都是一样的。
border-radius:5px 20px; //设置2个值：第一个值：左上右下；第二个值，右上左下
border-radius:5px 10px 15px; //设置3个值：第一个值是左上，第2个值右上/左下，第3个值右下。
border-radius:5px 10px 15px 20px; //设置4个值：左上，右上右下左下。

<html>
	<head>
		<meta charset="utf-8">
		<title>边框阴影效果----15HTML5 边框阴影。11.40分钟</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: orange;
				margin: 100px auto;
				/* 添加边框阴影 */
				/* box-shadow: 13px 13px 3px 4px #ffffff inset; */
				/* 添加4个方向的边框阴影 */
				box-shadow: -10px 10px 3px 4px rgba(0, 0, 150, 0.2) inset,
					10px -10px 3px 4px rgba(0, 0, 150, 0.2) inset;
			}
		</style>
	</head>
	<body>
		<!-- 文本阴影：text-shadow:offsetX offsetY blur color -->
		<!-- 边框阴影：box-shadow:h v blur spread color inset-->
		<!-- h:水平偏移值； v：垂直偏移值； 
		 blur模糊（可选，默认0）；
		 spread：阴影的尺寸，扩展和收缩阴影的大小（可选，默认0）；
		 color颜色（可选,默认黑色）；
		 inset内阴影（可选，默认是外阴影）-->
		<div></div>
	</body>
</html>

-----------------------------------------------------------------------------------------

/* 需求：把前面4个盒子的图片添加右下角的外阴影，为最后盒子添加4个方向的内阴影。 */
           .item:nth-of-type(-n+4) {
               box-shadow: 3px 3px 3px #ccc;
           }
           .item:last-of-type{
               box-shadow: 3px 3px 3px #ccc inset, -3px -3px 3px #ccc inset;
           }

xqiitan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
border-radius ,box-shadow边框阴影效果

border-radius 可实现，圆形，半圆，椭圆，圆角方形等UI效果。border-radius 边框圆角，当border-radius为正方形宽度的一般，就截取一个圆形。如果是一个长方形，border-radius是较窄的宽度的一半，就会截取一个圆角矩形椭圆：‘/’ 斜杠-用来设置单个角，不同方向的半径值。border-radius:100px/50px; // 水平x方向、垂直y...
复制链接

扫一扫