css3基础网站设计第七章

CSS3基础网站设计第七章主要介绍了CSS3中一些能够实现视觉效果的特性。其中包括圆角、边框图片、渐变、阴影和文本特效等。

/* 圆角 */
border-radius: 10px; /* 设置四个角都为10像素的圆角 */
border-radius: 10px 20px; /* 设置左上和右下角为10像素的圆角，左下和右上角为20象素的圆角 */

/* 边框图片 */
border-image-source: url(border.png); /* 设置边框图片 */
border-image-slice: 30 30 30 30 fill; /* 控制边框宽度和图片填充方式 */

/* 渐变 */
background-image: linear-gradient(to bottom right,blue,green); /* 线性渐变，从左上到右下，从蓝色到绿色 */
background-image: radial-gradient(circle at top left,red,yellow,green); /* 辐射渐变，以左上角为圆心，从红色到黄色到绿色 */

/* 阴影 */
Box-shadow: 10px 10px 5px grey; /* 放在元素后面的阴影 */
text-shadow: 2px 2px black; /* 文本阴影 */
inset Box-shadow: 2px 2px 5px grey; /* 放在元素前面的内阴影 */
inset text-shadow: 2px 2px black; /* 文本内阴影 */

/* 文本特效 */
text-overflow: ellipsis; /* 超出部分以省略号表示 */
text-transform: uppercase; /* 文本转换为大写字母 */
text-decoration: underline; /* 加下划线 */
text-shadow: 1px 1px black; /* 文本阴影 */
word-wrap: break-word; /* 单词换行 */

以上特性可以用于美化网站的样式和视觉效果，从而提升用户体验。需要注意的是，在使用这些特性时要注意兼容性，避免出现兼容问题。此外，也要注意不要过度使用这些特性，否则可能会影响网站的性能。