HTML5响应式网页设计【 第三章 、页面美化(二)】

全部笔记

目录

3.页面美化（二）

3.1边框圆角和阴影

3.1.1圆角边框介绍

3.1.2圆角边框的使用

3.1.3边框阴影介绍

3.2图片边框

3.2.1图片边框介绍

3.3渐变背景

3.3.1渐变背景简介

3.3.2线性渐变背景的使用

3.3.3径向渐变背景的使用

3.4图片背景美化

3.4.1背景样式属性

3.4.2设置背景图像的开始位置和裁剪样式

总结

---

3.页面美化（二）

3.1边框圆角和阴影

3.1.1圆角边框介绍

在CSS3出现之前实现圆角边框，需要先使用Photoshop通过切图实现圆角图片，再把图片设置为div的背景。这种做法既繁琐又不能适应不同分辨率的变化

3.1.2圆角边框的使用

圆角边框的属性

属性名	说明
border-radius	创建四个圆角
border-top-left-radius	设置左上角
border-top-right-radius	设置右上角
border-bottom-right-radius	设置右下角
border-bottom-left-radius	设置左下角

 border-radius属性的语法

border-radius：四个角半径
border-radius：左上角和右下角半径    右上角和左下角半径
border-radius：左上角半径    右上角和左下角半径    右下角半径
border-radius：左上角半径    右上角半径   右下角半径   左下角半径

 border-radius 是一种缩写的方法，其中值可以为半径或者百分比。

3.1.3边框阴影介绍

  在CSS3 中新增的box-shadow属性用于给元素块添加周边阴影效果的

语法

box-shadow：[阴影类型] x-offset y-offset 阴影模糊半径 阴影扩展半径 阴影颜色

属性名	说明
阴影类型	参数可选。默认是外阴影；如取其唯一值“inset”，其投影为内阴影
x-offset	阴影水平偏移量，其值可以是正负值
y-offset	阴影垂直偏移量，其值也可以是正负值
阴影模糊半径	此参数可选，，但其值只能是为正值，其值越大阴影的边缘就越模糊
阴影扩展半径	此参数可选，其值可以是正负值
阴影颜色	此参数可选。如不设定颜色，浏览器会取默认色

3.2图片边框

3.2.1图片边框介绍

 在CSS中，可以通过设置HTML元素的border宽度、颜色和样式，来使HTML元素表现出不同的边框。但不管怎么设置，这些都是一些非常原始的做法

        border-image属性的语法

border-image:border-image-source border-image-slice border-image-width border-image-repeat

属性名	说明
border-image-source	设置图片边框的背景图片，默认值为none
border-image-slice	规定了上、右、下、左边缘的元素内偏移，其取值为px或百分比
border-image-width	用来设置边框的宽度，可以直接用border-width来代替
border-image-repeat	用来指定border-image的排列方式，取值有stretch，repeat，round和space

3.3渐变背景

3.3.1渐变背景简介

 渐变背景在 Web 页面中是一种常见的视觉元素。使用 CSS3 渐变可以在两种颜色间制造出平滑的渐变效果。用它代替图片，可以加快页面的载入时间、减小带宽占用

 CSS3定义了两种类型的渐变：线性渐变和径向渐变

3.3.2线性渐变背景的使用

 创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定义终止色，终止色是平滑过渡后的颜色

语法

background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);

取值	说明
<angle>	通过角度来确定渐变的方向。角度是指水平线和渐变线之间的角度，逆时针方向计算。
<direction>	通过代表方向的关键词来确定渐变的方向。
<color_stop>	用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变。

3.3.3径向渐变背景的使用

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合

语法

background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);

取值	说明
<position>	主要用来定义径向渐变的圆心位置。
<shape>	主要用来定义径向渐变的形状。包括两个值“circle” 和“ellipse” 。
<size>	主要用于设置渐变半径的大小，从而用来确定径向渐变的结束形状大小。可以设置数值、百分比以及关键字。
<color_stop>	径向渐变线上的终止色

3.4图片背景美化

3.4.1背景样式属性

在 CSS3 中可以使用的背景属性

属性名	说明
background-color	设置元素的背景颜色
background-image	设置元素的背景图像
background-repeat	设置图像的重复样式
background-size	设置背景图像的尺寸
background-position	设置背景图像的位置

属性名	说明
background-attachment	设置元素中的图像是否固定
	或随页面一起滚动
background-clip	设置背景图像裁剪方式
background-origin	设置背景图像绘制的起始位置
background	简写属性

 

 

3.4.2设置背景图像的开始位置和裁剪样式

背景的起始点（background-origin）指定背景颜色和背景图像应用的位置  

裁剪样式（background-clip）决定了背景颜色和图像在元素盒子中绘制的区域

属性值	说明
border-box	在边框盒子内部绘制背景颜色和背景图像
padding-box	在内边距盒子内部绘制背景颜色和背景图像
content-box	在内容盒子内部绘制背景颜色和背景图像

 

总结

• 在CSS3中通过border-radius属性实现圆角边框，既可同时设置4个角的半径，还可以单独设置每个角的半径  
• 在CSS3中通过box-shadow属性可用于给元素块添加周边阴影效果，使用时需要设置阴影的类型、偏移量、半径以及颜色  
• border-image属性用于设置元素的图片边框，使用时需要设置图片路径、偏移量、边框宽度以及排列方式  
• 在CSS3中渐变背景分为线性渐变（linear-gradient）、径向渐变（radial-gradient）
•  背景的起始点（background-origin）指定背景颜色和背景图像应用的位置  
• 裁剪样式（background-clip）决定了背景颜色和图像在元素盒子中绘制的区域