css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影

简介: css3菜鸟教程学习笔记_CSS3 边框/圆角/盒阴影

一些最重要CSS3模块如下:

选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

## CSS3 边框

用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,常用属性:  

#### border-radius: 圆角

语法:border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

代码示例:

```

<body>

   <div style="display: flex; width: 80%; margin: 0px auto;">

       <div style="width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

       border: 1px solid black;

       border-radius: 50%;">

           Test border-redius</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           border-radius: 20px 5px 5px 20px">

           Test border-redius</div>

       <div style="width: 100px; height: 100px; line-height: 100px; vertical-align: middle;

        text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           border-top-left-radius: 20px;

           border-top-right-radius: 20px;

           border-bottom-left-radius: 10px;

           border-bottom-right-radius: 10px;

           ">

           Test border-redius</div>

   </div>

</body>

```

1.png

#### box-shadow : 阴影

语法:box-shadow: h-shadow v-shadow blur spread color inset;

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

2.png

代码示例:

```

<body>

   <div style="display: flex; width: 80%; margin: 0px auto;">

       <div style="width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

       border: 1px solid black;

       box-shadow: 2px 3px 1px #909090 inset;">

           Test box-shadow</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

       vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

           border: 1px solid black;

           box-shadow: 2px 3px 1px #909090">

           Test box-shadow</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 1px solid black;

               box-shadow: -2px -3px 1px #909090">

           Test box-shadow</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 1px solid black;

               border-radius: 50%;

               box-shadow: 2px 3px 1px #909090">

           Test box-shadow</div>

   </div>

</body>

```

3.png

#### border-image: 使用图片作为边框

语法: border-image: source slice width outset repeat|initial|inherit;

4.png

代码示例:

```

   <div style="display: flex; width: 80%; margin: 0px auto;">

       <div style="width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px; margin-right: 10px;

           border: 20px solid black;

           border-image: url(border.png) 30 30 round;">

           Test border-image</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

           vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 20px solid black;

               border-image: url(border.png) 30 30 repeat;">

           Test border-image</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

               vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

               border: 20px solid black;

               border-image: url(border.png) 30 30 stretch;">

           Test border-image</div>

       <div style="width: 100px; height: 100px; line-height: 100px;  

               vertical-align: middle; text-align: center; font-size: 8px;margin-right: 10px;

                   border: 20px solid black;

                   border-radius: 50%;

                   box-shadow: 2px 3px 1px #909090;

                   border-image: url(border.png) 30 30 stretch;">

           Test border-image</div>

   </div>

```

5.png

目录
相关文章
|
15天前
|
数据采集 存储 前端开发
Puppeteer教程:使用CSS选择器点击和爬取动态数据
本文介绍如何使用Puppeteer结合CSS选择器爬取动态网页数据,以贝壳网的二手房价格为例,通过代理IP提高爬虫成功率。文章详细讲解了Puppeteer的安装和配置、代码实现及数据趋势分析,帮助读者掌握动态网页爬取技术。
Puppeteer教程:使用CSS选择器点击和爬取动态数据
|
1月前
|
前端开发
【CSS】纯css3螺旋状loading加载特效
【CSS】纯css3螺旋状loading加载特效
31 4
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
213 1
|
4月前
|
JavaScript 内存技术
Vue动画——使用最新版Animate.css教程
Vue动画——使用最新版Animate.css教程
338 0
|
1月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
6月前
|
前端开发
|
11月前
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
前端开发
零基础CSS入门教程(13)——边框样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
零基础CSS入门教程(13)——边框样式