1. 圆角边框

border-radius：length；用于设置元素的外边框圆角

length越大，半径越大，半径的圆越大，弧线越强烈。

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

        .yuanxing {width: 200px;height: 200px;background-color: palevioletred;/* border-radius: 100px; *//* 50%就是高度和宽度的一半 */border-radius: 50%;}

如果是个矩形，设置为高度的一半就可以

        .jvxing {width: 300px;height: 100px;background-color: aquamarine;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}

border-radius：length；是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针）
分开写，左上角：border-top-left-radius

2. 盒子阴影

box-shadow

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

h-shadow：正值越大往右偏移

v-shadow：正值越大往下偏移

blur：0的话是不模糊，越大越模糊

spread：影子的大小

默认outset ，不需要写outset，如果要内部阴影写 inset

盒子阴影不占空间，不会影响其他盒子排列

3. 文字阴影

用text-shadow 属性将阴影应用于文本

语法：text-shadow：h-shadow v-shadow blur color；

圆角边框+盒子阴影+文字阴影相关推荐

CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS圆角边框-盒子阴影-文字阴影
圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
【web前端】CSS笔记小结圆角矩形+盒子阴影+文字阴影（Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 圆角边框 ①原理 ②使用疑惑qwq! ③圆形.圆角矩形及不同圆角的实现 II. 盒子阴影 III. 文字阴影 I. 圆角边框 ①原理 eg. 不 ...
网页边框和网页文字阴影
CSS: <style type="text/css"> /* 为 DIV 加阴影 */ .out { position:relative; background:#b ...
CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
css圆角边框、文字、盒子阴影
文章目录圆角边框.文字.盒子阴影圆角边框盒子阴影文字阴影圆角边框.文字.盒子阴影圆角边框 css3中新增了圆角边框样式 border-radius(半径)属性用于设置元素的外边框圆角参数 ...
CSS中的盒子阴影和文字阴影
去掉li前面的小圆点: list-style: none; 圆角边框:盒子编程圆角. 语法格式: border-radius: length; 写法: border-radius:50%;//变成圆形 ...

圆角边框+盒子阴影+文字阴影

1. 圆角边框

2. 盒子阴影

3. 文字阴影

圆角边框+盒子阴影+文字阴影相关推荐

最新文章

热门文章