圆角边框、盒子阴影

最新推荐文章于 2024-02-20 20:39:44 发布

山山而川-T

最新推荐文章于 2024-02-20 20:39:44 发布

阅读量114

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Valentine_T/article/details/107541546

版权

HTML+CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1. 圆角边框（CSS3）

语法

border-radius:length;/* 其中每一个值可以为数值，也可以是百分比*/

要让一个正方形变成圆：

border-raduis:50%;

矩形圆角边框，这个就不能用百分比了，因为百分比表示高度和宽度的一半。而矩形圆角边框只需设置高度的一半即可。

上图矩形圆角边框代码如下：

	<style type="text/css">
		input {
			width: 200px;
			height: 20px;
			border:1px solid purple ;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<input type="text" placeholder="搜索关键字">
</body>

2. 盒子阴影（CSS3）

语法

box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影大小 阴影颜色 内/外阴影

前2个属性是必须要写的，其余可以省略
外阴影（outset）是默认的，不能写，内阴影有需求可以写（inset）

.box {
			width: 50px;
			height: 50px;
			background-color:pink;
			/* box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影大小 阴影颜色 内/外阴影*/
			box-shadow: 0 15px 30px rgba(0,0,0,0.3)
		}

在这里插入图片描述

山山而川-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆角边框、盒子阴影

1. 圆角边框（CSS3）语法border-radius:length;/* 其中每一个值可以为数值，也可以是百分比*/要让一个正方形变成圆：border-raduis:50%;矩形圆角边框，这个就不能用百分比了，因为百分比表示高度和宽度的一半。而矩形圆角边框只需设置高度的一半即可。上图矩形圆角边框代码如下： <style type="text/css"> input { width: 200px; height: 20px; border
复制链接

扫一扫

专栏目录