慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕先生4138651

各种实心半圆

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-10-24
慕先生4138651

CSS3边框圆角效果 border-radius border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。实心上半圆：方法：把高度(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-10-24
AGhosts

RGBA是在RGB的基础上增加控制alpha透明度的参数。 color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。并非所有浏览器都支持使用百分数值。 A为透明度参数，取值在0~1之间，不可为负值。

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2016-10-24
AGhosts

border-image 为CSS的style属性，基本语法如下： border-image:url() 切割图片的宽度 [延伸方式] url为图片的绝对路径，切割图片的宽度与普通的border基本一致，延伸方式有3种选择： repeat重复，round平铺，stretch拉伸

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-10-24
AGhosts

盒子阴影 x:负左右正； y:负上正下；阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-10-24
AGhosts

box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注：inset(投影方式，如果是inset，则是内部投影，否则默认为外部)可以写在参数的第一个或者最后一个，其他位置是无效的。 box-shadow可以添加多个阴影，用逗号隔开

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-10-24
sulin

div { padding: 20px; margin: 30px; outline: red solid 2px; outline-offset:2px; border: 2px solid green; } 这样写没有效果：outline: red solid 2px 2px;

查看全部

0 采集收起来源：CSS3外轮廓属性
2016-10-23
sulin

由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
AGhosts

CSS3在不同浏览器中有不同的前缀虽然大部分都已经支持了css3 但是为了更好的兼，前缀还是不可少的 chrome和safari浏览器的前缀-webkit firefox浏览器的前缀是-moz IE浏览器前缀是-ms opera浏览器前缀是-o

查看全部

0 采集收起来源：什么是CSS3？
2016-10-23
斜杠男人

1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2016-10-23
斜杠男人

禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 在IE6-8中完全是不支持CSS3 Media ，需要引入media-queries.js 和respond.js文件

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
斜杠男人

Flexbox规范版本众多，浏览器对此语法支持度也各有不同

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2016-10-23
慕粉1420362554

transform:scale(0.8); -ms-transform:scale(0.8); /* IE 9 */ -moz-transform:scale(0.8); /* Firefox */ -webkit-transform:scale(0.8); /* Safari 和 Chrome */ -o-transform:scale(0.8); /* Opera */

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-10-23
慕粉1420362554

scale()以元素中心为基点进行缩放。 (值>1时，扩大，值<1时缩小) 1.scale(X,Y)使元素水平和垂直方向同时缩放; 2.scaleX(x)使元素水平方向缩放; 3.scaleY(y)使元素垂直方向绽放; 注：缩放值默认为1，0.01-0.99为缩小；1.01以上为放大当 scale 的值为一个时，表示X和Y同时缩放。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2018-03-22
慕粉1420362554

概述：transform:skew(x,y)是改变元素的形状，不会让它旋转<br> 它是让元素以其中心位置，围绕X轴与Y轴倾斜一定的角度它还有skewY()/skewX()是单独让X轴或者Y轴倾斜单位是deg； x 为正逆时针，为负顺时针； y正好相反；扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2018-03-22

首页上一页 382 383 384 385 386 387 388 下一页尾页

0/150

提交

取消

开始学习

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

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