- A+
所属分类：Web前端
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* body 总有一个默认的外边距 */ /* 常见操作 */ body{ margin: 0; padding: 0; text-decoration: none; } /* border 粗细 样式 颜色 */ #box{ width: 300px; border: 1px solid red; padding: 0 0 0 0; } h2{ /* 去外边距 */ margin: 0; font-size: 16px; background-color: gold; line-height: 30px; color: white; } form{ background: gold; } div:nth-of-type(1) input{ border: 3px solid black; } div:nth-of-type(2) input{ border: 3px dashed purple; } div:nth-of-type(3) input{ border: 2px dashed red; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>账户：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> </body> </html> 外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 盒子计算方法 margin + border + padding + 内容宽度 --> <!-- 外边距妙用：居中元素 --> <style> /* 顺时针旋转 上右下左 */ /* margin:0 全0 */ /* margin:0 1px 上下0 左右1 */ /* margin:0 1px 2px 3px 上右下左*/ #box{ width: 300px; border: 1px solid red; /* 上下为0 左右居中 */ margin: 0 auto; } h2{ margin: 0; font-size: 16px; background-color: gold; line-height: 30px; color: white; } form{ background: gold; } input{ border: 1px solid black; } div:nth-of-type(1){ padding: 10px; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>账户：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> </body> </html> 圆角边框
边框圆角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 左上 右上 右下 左下 顺时针 --> <!-- 圆 圆角 = 半径 + 边框 --> <style> div{ width: 100px; height: 100px; border: 10px solid red; border-radius: 10px; } </style> </head> <body> <div></div> </body> </html> 圆形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 50px; background: red; border-radius: 50px 50px 0 0; } img{ border-radius: 37px; } </style> </head> <body> <div></div> <img src="images/demo.png" alt="【前端】CSS3学习笔记（三）" alt=""> </body> </html> 阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- margin: auto; 居中 要求 块元素 块元素有固定的宽度--> <style> img{ margin: auto; border-radius: 37px; box-shadow: 10px 10px 50px yellow; } </style> </head> <body> <div style="width: 1000px; height: 500px; display: block; text-align: center"> <img src="images/demo.png" alt="【前端】CSS3学习笔记（三）" alt=""> </div> </body> </html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14980267.html
版权所有，如需转载请注明出处。
