为了账号安全,请及时绑定邮箱和手机立即绑定
  • 用来将背景图片做适当的裁剪以适应实际需要。

    语法:

    background-clip : border-box | padding-box | content-box | no-clip

    参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。


    查看全部
  • text-shadow可以用来设置文本的阴影效果。

    语法:

    text-shadow: X-Offset Y-Offset blur color;

    X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;      

    Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

    Color:是指阴影的颜色,其可以使用rgba色。


    查看全部
  • text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:

    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap;

    同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。


    查看全部
  • 第一个参数省略时,默认为“180deg”,等同于“to bottom”。

    第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);


    542a25da00017e9406980223.jpg

    查看全部
  • RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

    color:rgba(R,G,B,A)

    以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。

    查看全部
  • 阴影模糊半径与阴影扩展半径的区别

    阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

    阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;


    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    参数介绍:

    注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

    如果添加多个阴影,只需用逗号隔开即可。

    查看全部
  • CSS3能做什么? 1.圆角效果 2.块阴影与文字阴影 3.色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA。

    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2019-08-16

  • 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

    background-image:linear-gradient类型(角度, red, orange,yellow,green,blue,indigo,violet);

    渐变类型,径向为radial

    渐变角度:

    https://img1.sycdn.imooc.com//5d55737000017e9406980223.png

    查看全部
  • color:rgba(R,G,B,A)

    A为透明度参数,取值在0~1之间,不可为负值。

    查看全部
  • 图片边框:

    border-image:url(xx.jpg) 切割图片的宽度 图片延伸方式;

    图片延伸方式:round平铺,repeat重复,stretch拉伸

    查看全部
  • 阴影box-shadow:

    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    (必需,必需,可选,可选,可选,可选inset是内部阴影)

    注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

    查看全部
  • border-radius是向元素添加圆角边框。

    /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

    查看全部
  • 注意: scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。

    :hover 选择器用于选择鼠标指针浮动在上面的元素。

    提示::hover 选择器可用于所有元素,不只是链接。

    提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

    注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。


    查看全部
  • Skew()具有三种情况:

    1、skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);

    第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切

    2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)

    3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)



    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!