CSS3第一章

边框圆角效果

border-radius:10px //所有角都是用半径为10px的圆角

border-radius:左上角,右上角,右下角和左下角(顺时针)

举个栗子:上半圆(高度设置宽度的一般即可)

反之右半圆(宽度设置高度的一般)


边框阴影 box-shadow

box-shadow:向元素添加阴影属性

X轴偏移量 Y轴偏移量 阴影模糊半径(可选) 阴影拓展半径(可选) 阴影颜色(可选) 投影方式(inset内部阴影,默认外阴影)


边框图片 border-image

border-image:url(图片路径)上右下左 延伸方式(round平铺、repeat重复、stretch拉伸)


颜色渐变

linear(线性渐变) radial(径性渐变)

linear-gradinet(方向,颜色起始与终点,可以有多个颜色)

举个栗子:


嵌入字体@font-face

它能够加载服务器的字体文件,让浏览器端可以显示用户里没有安装的字体:

语法:

@font-face{

font-family:“字体名称”

src:字体文件在服务器上的相对或绝对路径

}


background-origin

设置元素背景图片的起始位置

语法:background-origin:border-box(图片从边框开始显示)|padding-box(图片从内边距开始显示,默认值)|content-box(内容区域开始显示)

需要注意的是,背景要设置no-repeat,该属性才有效


background-size

设置背景图片的大小

auto:默认值,不改图片初始值

长度值:~

百分比:将图片宽高一次设置为所在元素高乘以百分比得出的数值

cover:将背景图片等比缩放以填满整个容器

contain:容纳,将背景图片等比缩放至某一边紧贴容器边缘为止

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,561评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,784评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 6,311评论 0 2
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 3,916评论 0 0