水平居中、圆角边框及盒子阴影效果

最新推荐文章于 2022-07-23 15:37:54 发布
最新推荐文章于 2022-07-23 15:37:54 发布
阅读量227 收藏
点赞数
分类专栏： # HTML&CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/116724222
版权

一、水平居中

			text-align: center; /* 让盒子中的文字居中对齐 */
			margin: 0 auto; /* 让盒子居中 上下为0 左右为auto */

二、圆角边框

	<style type="text/css">
		div {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px auto;
			/* border-radius: 150px; 正方形变成圆形*/
			border-radius: 50%;
		}
	</style>

三、盒子阴影效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			color: #fff;
		}
		div {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/* box-shadow: 2px 2px 2px 2px red; */
			/* box-shadow: 0px 15px 30px rgba(0,0,0,0.1); */
			transition: all 1s;	
		}
		div:hover{
			box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
黄晶谛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS--盒子水平居中、圆角、阴影
weixin_44348052的博客
01-12 233
1 水平居中 /* 块级元素：1 指定宽度 2 左右外边距为auto */ .div { background-color: pink; width: 300px; height: 200px; margin: 0 auto; } /* 行内/行内块元素：父元素添加text-align：center */
不随页面的上下滑动，靠右且居中的圆角边框
黄坤的博客
04-07 127
代码如下： #fixDiv{ <!--设置div的长宽--> width: 60px; height: 100px; <!--设置div的背景--> background: red; <!--设置边框的颜色和粗细--> border: 1px solid #ccc; <!--设置定位--> position: fixed; &l...
内外边距及div居中、圆角边框及阴影 2022-2-5
m0_56661579的博客
02-05 1480
内外边距及div居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距的妙用</title> <!--外边距的妙用：居中元素--> <style> /* 顺时针旋转 margin 0 margin 0 1px
前端笔记 | CSS盒子模型
Huffie博客
03-15 320
网页布局学习有三大核心，盒子模型，浮动和定位，学习盒子模型可以帮助我们很好的布局页面。网页布局过程：先准备好相关的网页元素，利用CSS设置盒子样式，然后摆放到相应位置，往盒子里面装内容。
CSS|圆角边框
Alan_Lowe
08-01 242
CSS|圆角边框 设置边框的角，使用border-radius 它一共有四个参数，分别代表左上角、右上角、右下角、左下角的曲折程度； 如果只写三个参数，那么分别代表左上角、右上角和左下角、右下角； 如果只写两个参数，那么分别代表左上角和右下角、右上角和左下角； 如果只写一个参数，那么代表四个角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g
CSS笔记6-圆角边框
PIUYIXIU的博客
10-29 109
圆角边框 <html> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style type="text/css"> div:first-of-type{ box-shadow:gray 10px 10px 30px; /*外阴影 颜色 xy坐标 渲染面积*/ box-shadow:inset orange 10px 10px 30px; /*内阴影 颜色 xy坐标
前端 50 道面试题及答案.docx
07-09
- **CSS3边框和背景**：`border-radius`实现圆角，`border-image`设置边框图片，`background-size`调整背景图片大小。 - **透明度和RGBA**：`opacity`和RGBA颜色值支持透明效果。 - **文字阴影**：`text-shadow`...
HTML5+CSS3网页设计-第六章 盒子模型.pptx
12-21
在CSS中设置一个元素的圆角边框，可以使用`border-radius`属性。例如，如果想让一个元素的四角都为10px的圆角，可以这样写： ```css element { border-radius: 10px; } ``` 设置盒子的阴影，可以使用`box-shadow`...
3-html+css简答题.doc
10-20
：可以使用margin、padding、text-align等属性来实现水平居中。 2. 如何垂直居中一个元素？：可以使用margin、padding、vertical-align等属性来实现垂直居中。 3. 什么是盒子模型？：盒子模型是CSS中的一种布局模型...
css.pdf
04-19
17. **盒子阴影/过渡/ICO图片**：`box-shadow`添加阴影效果，`transition`实现平滑过渡效果，`cursor`属性可以设定鼠标光标形状，ICO图片通常用于网站的图标。 这些知识点构成了CSS的基础，掌握它们可以帮助开发者...
CSS学习16：圆角边框
Blog of Lytracy
07-20 241
文章目录1、使用 `border-radius` 属性来创建圆角。 1、使用 border-radius 属性来创建圆角。 例子： 效果： border-radius 的值除了用百分号（%）还可以用 length，比如：border-radius:25px;。 将上述的border-radius 改成如下设置： border-radius: 25px; 效果： #2、挑战：做一个酷炫的盒子 要求：盒子的宽高设置一个合适的，盒子相对于浏览器水平居中，并且距离顶端设置合适的距离，文字相对于盒子水平垂直居
Web前端 盒子居中 定位与浮动的区别 css透明度 盒子和文字阴影 圆角
m0_72686628的博客
07-23 476
如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。border-radius20px40px60px;右下角border-bottom-right-radius;左下角border-bottom-left-radius;右上角border-top-right-radius;...
HTML5+CSS3项目实战详解
05-16
课程讲解循序渐进，难度由浅入深，老师带领学生通过实战练习，学会HTML5+CSS3开发。课程中包含5个实战练习：声音和图像淘宝轮播图个人简介五子棋百度页面
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度
Bulut0907
01-27 5702
目录1. 盒子模型的组成1. border边框1.1 border-collapse: collapse2. padding 1. 盒子模型的组成 1. border边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> div {
HTML5、CSS3实现，圆角、阴影、边界图片
W的博客
07-21 1290
HTML5、CSS3实现，圆角、阴影、边界图片
HTML调整矩形框的大小、居中、圆角、边框
qq_39402742的博客
07-11 8168
/*调整矩形框的大小、居中、颜色*/ height: 30%; width: 40%; margin: auto; margin-top: 15%; color: #2ca02c; text-align: center; background-color: #76deff;
让DIV垂直居中+水平居中+圆角属性
handsome10221的专栏
11-06 1303
让既垂直有水平居中首先就要知道div的宽度和高度，然后设置他的position属性定位，再设置它从顶部到父元素和左边到父元素的距离都为50%，然后再设置它的外边距margin上边自己高度的一半，左边为自己宽度的一半,如下css代码。 html: css: .main { width: 50%; height: 400px; border: 1px solid; bac
css属性基础以及wxss——居中，渐变色边框，圆角边框，横向布局，重叠div，div固定在底部，input的无边框显示下划线
meixi_android的博客
07-04 3753
text-align: center;——子item居中对齐 display: flex;——子item横向布局 -webkit-justify-content: center;——子item居中 margin: auto;——子item居中 background: #f4f4f4;——背景色（background-color: yellowgreen;） opacity: 0.5...
html 盒子水平居中
最新发布
06-04
如果要让一个内联元素水平居中，可以使用 text-align 属性将其父元素的文本对齐方式设置为 center。 示例代码如下： ```html ;"> ; width: 200px; height: 200px; background-color: red;"> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值