css盒子阴影与圆角

圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法： border-radius:length;

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和

border-bottom-left-radius

eg:

圆形长宽相等：border-radius: 50%; //或者长宽长度的一半

矩形圆角：border-radius: 10px;

设置四个不同圆角的矩形：border-radius: 10px 20px 30px 40px;

盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

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

h-shadow 必须设置，水平阴影的位置，允许负值

v-shadow 必须设置，垂直阴影的位置，允许负值

blur 模糊距离

spread 阴影的尺寸

color 阴影的颜色

inset 将外部阴影（outset）改为内部阴影

注意：

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列。

eg:box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3) inset;

文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow 必须设置，水平阴影的位置，允许负值

v-shadow 必须设置，垂直阴影的位置，允许负值

blur 模糊距离

color 阴影的颜色

eg:text-shadow: 10px 10px 10px rgba(0, 0, 0, .3);

css盒子阴影与圆角相关推荐

CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
CSS 盒子阴影和文字阴影
目录盒子阴影文字阴影盒子阴影 CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影语法: box-shadow:h-shadow v-shadow blur sprea ...
CSS盒子阴影，文字阴影
盒子阴影 h-shadow和v-shadow是必填的. rgba(0,0,0,0.3) 黑色透明度为0.3 <!DOCTYPE html> <html lang="en& ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...

css盒子阴影与圆角

css盒子阴影与圆角相关推荐

最新文章

热门文章