回顾

盒子模型

盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！
CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

边框和阴影

边框和阴影是css里面的属性，顾名思义，是给元素施加边框属性和阴影属性。

圆角边框示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圆角边框</title><style>#d1{width: 200px;height: 100px;border: 5px red solid;/*圆角边框*/border-radius: 20px;/*border-radius: 200px;*/}#d2{width: 100px;height: 100px;border: 5px red solid;/*圆角边框*/border-radius: 100px;float: right;margin-top: -110px;}#d3{width: 100px;height: 100px;border: 5px red solid;border-radius: 50px 0 0 0;}#d4{width: 100px;height: 100px;border: 5px red solid;border-radius: 100px 0 0 0;float: right;margin-top: -110px;}#d5{width: 100px;height: 100px;border: 2px red solid;/*圆角边框*/border-radius: 50px 50px 0 0;}#d6{float: right;margin-top: -100px;width: 100px;height: 100px;border: 2px red solid;/*圆角边框*/border-radius: 100px 100px 100px 0;}#d7{background: red;width: 100px;height: 50px;border: 1px red solid;/*圆角边框*/border-radius: 50px 50px 0 0 ;}#d8{float: right;margin-top: -50px;background: red;width: 50px;height: 100px;border: 1px red solid;/*圆角边框*/border-radius: 50px 0 0 50px ;}</style>
</head>
<body><div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div></body>
</html>

效果

圆角边框可以有很多种，它的属性是border-radius: _px _px _px _px ;
并且它圆角变化的顺序是左上，右上，右下，坐下
因此就有很多种变化了

阴影示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阴影</title><style>#d1{margin: 0 auto;width: 50px;height: 50px;border-radius: 25px;box-shadow: -10px 10px 50px yellow;}img{border-radius: 25px;}</style>
</head>
<body><div><div id="d1"><div><img src="data:images/tx.jpg" alt="tx"></div></div></div></body>
</html>

效果

看起来是不是像qq头像的效果了，其实头像也是边框，圆形只是圆角边框的一种！

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

CSS学习13之圆角边框及阴影相关推荐

CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
CSS的圆角边框以及阴影
大家好,我们今天分享一下CSS的圆角边框以及阴影源码实例: <!DOCTYPE html> <html lang="en"> <head>&l ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影
目录前言一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置结语前言本节介绍仅在CSS3中的新内容,例如 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
CSS圆角边框-盒子阴影-文字阴影
圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...
CSS圆角边框和阴影
圆角边框 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
CSS4day（圆角边框，阴影，浮动详解及其示例）
文章目录快报案例圆角边框: 盒子阴影: 文字阴影: 浮动 1.1 传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3为什么需要浮动? 1.4什么是浮动? 1.5 浮动特性(重难点) ...

CSS学习13之圆角边框及阴影

回顾

边框和阴影

圆角边框示例

阴影示例

作者有话说

CSS学习13之圆角边框及阴影相关推荐

最新文章

热门文章