《CSS学习笔记》之盒子模型：边框、内外边距、圆角、阴影

每天八杯水D

已于 2022-09-14 10:59:53 修改

阅读量188

点赞数

分类专栏： Web前端开发文章标签： css 盒子模型阴影圆角

于 2021-12-22 09:14:57 首次发布

本文链接：https://blog.csdn.net/weixin_45947938/article/details/122077201

版权

Web前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、盒子模型样子和三大属性

二、边框

三、内外边距（padding、margin）

四、圆角边框

五、盒子阴影

六、扩展

一、盒子模型样子和三大属性

小技巧：

二、边框

三、内外边距（padding、margin）

小技巧：

/*外边距妙用：居中元素*/
margin: 0 atuo;

四、圆角边框

五、盒子阴影

六、盒子的显示和隐藏

隐藏盒子

盒子显示出来

丝滑显示盒子出来

七、扩展

Vue	Element - The world's most popular Vue UI framework
模板之家	后台管理系统网站模板_后台管理系统网站模板免费下载_模板之家
飞冰	飞冰-基于 React 的研发解决方案 \| 飞冰

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

每天八杯水D

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《CSS学习笔记》之盒子模型：边框、内外边距、圆角、阴影

《CSS学习笔记》之盒子模型：边框、内外边距、圆角、阴影
复制链接

扫一扫

专栏目录

CSS3学习笔记之立体盒子

03-16

本篇学习笔记将深入探讨如何利用CSS3创建具有立体感的盒子，供所有对Web设计感兴趣的人共享和学习。首先，我们要了解CSS3中的盒模型。在传统CSS2.1中，盒模型包括内容区域（content）、内边距（padding）、边框...

CSS3学习笔记.pdf

最新发布

04-29

### CSS3 学习笔记知识点总结 #### 一、CSS3 简介 - **定义**：CSS3，即层叠样式表第三版，是Web前端开发中的一个重要组成部分，用于控制网页元素的布局和外观。 - **特性**：与CSS2相比，CSS3提供了更多功能强大的...

参与评论您还未登录，请先登录后发表或查看评论

盒子模型与边框与阴影

weixin_45680043的博客

02-08

133

盒子是什么个人理解为一个有边框的东西组成有 margin 外边框 padding 内边框 border 边框组成边框的粗细，样式以及颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...

CSS中的盒子模型、圆角边框、盒子阴影和文字阴影

icemwj的博客

09-17

845

1、盒子模型 所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外边距（margin），边框（border），填充（padding），和实际内容（content）。 CSS 中的盒子模型包括 IE盒子模型和标准的W3C盒子模型。标准的 W3C 盒子模型 和 IE盒子模型的区别如下： 1、标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域con

圆角,阴影以及背景设置

m0_68505386的博客

04-04

480

border-radius圆角设置写法:border-radius: 20px 10px 30px 50px; 顺序左上.右上.右下.左下值越大越圆四个角设置50%.或者宽度的一半px就是圆形.border-radius: 50%; △两个值第一个值表示左上角和右下角的圆角大小,第二个值表示右上角和左下角的圆角大小(对角关系) ☆三个值:第一个表示左上角的圆角大小,第二个表示右上角和在左下角大小(对角),第三个表示右下角的圆角关系阴影分为外阴影和内阴影;box-shadow .

CSS与CSS3基础知识（四）——盒子模型的内外边距以及box-shadow和box-sizing属性属性

不加防腐剂的博客

11-28

683

希望可以在CSDN与大家一起成长，如有错误请大家多多批评指教！CSS 英文全称为Cascading Style Sheet，中文译为“层叠样式表”。CSS以 HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。在(点击可复习)中学习了盒子模型的边框属性，现在一起学习盒子模型内外边距以及阴影属性吧！

Css盒模型简单概述

m0_57759387的博客

06-08

109

盒模型:就是游览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的版式模型主要有三个属性控制:position属性、display属性、和float属性。 position属性:控制页面上元素之间的位置关系。 display属性:控制元素之间的堆叠、并排或者不在页面上显示。 float属性:提供控制仿佛，以便与把元素成成多栏布局。盒模型的讲解:在默认的情况下，每个盒子的边框的是看不见，背景也是透明是的。所以我们不能直接地看到页面...

CSS学习笔记

08-13

### CSS学习笔记 #### CSS简介 CSS（Cascading Style Sheets），即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化...

HTML5学习笔记（总结提炼版）——002 CSS

03-14

CSS3引入了许多新特性，如多列布局（`column-count`、`column-gap`等）、圆角边框（`border-radius`）、阴影效果（`box-shadow`、`text-shadow`）、过渡效果（`transition`）、动画（`animation`）、渐变（linear-...

css学习笔记

10-21

### CSS学习笔记 #### CSS简介 CSS（Cascading Style Sheets）是一种用于定义网页文档表现的语言，主要用于控制HTML文档中的元素布局、颜色、字体等视觉样式。通过使用CSS，可以将网页的内容与表现形式分离，使得...

Web前端——边框圆角（圆形，三角形）

Singe_lq的博客

07-15

1164

border-radius:设置边框圆角。高和宽一比一，圆角1/2倍宽。宽和高二比1，圆角1/2倍宽。宽和高一比一，圆角一倍。

前端----HTML/CSS 圆角边框

nO0b

09-24

8790

border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少其实方法特别简单,css中的一个border-radius属性就够了这个属性是CSS 3支持的属性值是圆角的半径,半径越大,圆角的成都越大方法如下: boder-top-left-radius：30px； //左上角 boder-top-right-radius：30px； //...

前端入门css3-----圆角边框

m0_61656944的博客

01-20

713

前端学习（自用）-圆角边框

jiangcaicai2的博客

07-21

138

圆角边框

前端基础圆角边框

weixin_42218868的博客

03-20

744

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ background-color: aqua; } p{ ...

前端学习（十四）CSS 圆角边框代码

y1yo2的博客

08-24

3798

.content{ border: 2px solid #000000; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } <div class="content">该边框为圆角;</div>圆角代码也支持拆分的（四个边框都圆角10px的拆分c

Web前端入门（十八）圆角边框及盒子阴影

treesorshining的博客

10-26

2314

半径（圆的半径）原理:(椭）圆与边框的交集形成圆角效果参数值可以是数值或百分比的形式如果是正方形盒子，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以（圆角矩形效果）该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角 2.盒子阴影 CSS3 中新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。值描述 h-shadow 必需。水平阴影的位置，允许负值。阴影正值往右移动

原创：超圆滑圆角框的半完美解决方案

weixin_33736832的博客

03-08

480

超圆滑圆角框的半完美解决方案作者：冰极峰博客地址：http://www.cnblogs.com/binyong 转载请注明出处导言：本文探讨的是圆角框的终极解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。圆角框，因为其样式比直角框漂亮，所以成...

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影

小宇y的博客

09-07

1182

目录前言一、圆角边框（一）border-×-×-radius（二）border-radius二、阴影（一）基本阴影设置（二）内部阴影设置结语前言本节介绍仅在CSS3中的新内容，例如圆角边框、盒子阴影等等。一、圆角边框（一）border-×-×-radius 可以通过border-top/bottom-left/right-radius属性来对边框的四个角进行圆角处理，前提是要定义border属性，即有边框才有效。从边框的四个角分为以下四个属性： border-top-left-radius:（左

CSS3盒子模型：边框、内边距与阴影解析

本章的任务包括制作商品分类页面、美容产品热点页面和视频播放列表页面，目标是掌握盒子模型及其构成，计算盒子模型尺寸，使用不同的解析方式布局网页，以及运用圆角和阴影属性增强网页元素的视觉效果。通过这些实践...