ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影

网页美工大部分效果图都是利用ps做的，以后切图工作在ps完成。

综合案例

图片不超出box（和父亲一样宽）：

标签都是有语义的，标题要用h4，合理的地方用合理的标签。
每个盒子都取类名比较方便找到，利于后期维护。
margin和padding大部分情况下可以混用。
去掉li前面的项目符号（小圆点）

圆角边框
在css3中，盒子可以变圆角。
语法：

radius半径：圆与边框的交集形成圆角效果。

半径越大弧度越明显。参数值可以是长度也可以是百分比。
半径是正方形盒子宽度的一半，盒子为圆形。
50%就是宽度和高度的一半。
圆角矩形则半径设置为高度的一半。
该属性其实是简写，可以跟四个属性值，即设置四个不同的圆角。
也可以拆开写border-top-left-radius、、、top和left不能颠倒。

盒子阴影

外部阴影默认outset不要写，否则阴影无效。
盒子阴影不占空间，不影响其他盒子排列。

文字阴影

ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影相关推荐

前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
CSS的盒子模型、圆角边框、盒子阴影、文字阴影及ps操作
目录一.盒子模型 (一)边框 border 1.基本写法 2.分开写 3.表格细线边框 border-collapse 4.border与盒子大小 (二)内边距 padding 1.基本写法 2.分 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
CSS圆角边框-盒子阴影-文字阴影
圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...
圆角边框+盒子阴影+文字阴影
目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框 border-radius:length:用于设置元素的外边框圆角 length越大, 半径越大,半径的圆越大,弧线越强烈. 参数 ...
【web前端】CSS笔记小结圆角矩形+盒子阴影+文字阴影（Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 圆角边框 ①原理 ②使用疑惑qwq! ③圆形.圆角矩形及不同圆角的实现 II. 盒子阴影 III. 文字阴影 I. 圆角边框 ①原理 eg. 不 ...

ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影

ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影相关推荐

最新文章

热门文章