慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

梦风晓雨

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
梦风晓雨

1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; }

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-04-05
梦风晓雨

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

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-04-05
梦风晓雨

box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-04-05
梦风晓雨

实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-04-05
梦风晓雨

半圆设置 <!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> div.circle{ height:50px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*四个圆角值都设置为宽度或高度值的一半*/ } /*任务部分*/ div.semi-circle{ height:100px; width:200px; background:#9da; border-radius:0 0 100px 100px; } </style> </head> <body> <div class="circle"> </div> <br/>  <div class="semi-circle"> </div> </body> </html>

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2018-03-22
12323123123

px作为单位要省略，4个数字遵循从上到左，顺时针的顺序

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-04-05
12323123123

可实现圆角、渐变、动画、个性字体、不同浏览品目尺寸拥有不同的展现样式

查看全部

0 采集收起来源：CSS3能做什么？
2016-04-05
qq_Dream_High

transition-property过度对象 transition-duration过度持续时间 transition-function过度速度（由慢及快，由快及慢，快慢快） transition-delay（延迟时间）

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2016-04-04
WWEEBB

在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-04-04
wangyimei

background-origin:border-box/padding-box/content-box分别从边框内边距内容起始背景必须设置为no-repeat

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-04-02
慕姐0332557

media媒体查询,一个页面，一套css样式，一套js效果，实现在不同分辨率终端的适应 all所有设备 screen屏幕 print打印机

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-04-01
慕姐0332557

all所有设备 screen屏幕 print打印机

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-04-01
慕姐0332557

-webkit-justify-content:center 居中 flex-direction:row 横向排列 flex-direction:column -webkit-align-items:center

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2016-04-01
井底呱

a[href="##"]{background:red;color:#fff;} a[href$=doc]{background:green;color:#fff;} a[title]{background:blue;color:#fff;}

查看全部

0 采集收起来源：CSS3选择器属性选择器
2018-03-22

首页上一页 576 577 578 579 580 581 582 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果