CSS3的用户界面、颜色、透明
1、CSS用户界面
1、在css3中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框，紧跟在-webkit，-moz-， 或-ms-的后面作为支持前缀属性的第一个浏览器版本
2、resize属性指定一个元素是否可以由用户调整大小的。both表示可以调整宽高。配合overflow-auto
overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
both表示可以调整宽高，horizontal调整宽度，vertical调整元素高度
3、box-sizing属性默许以确切的方式适应某个区域的具体内容
4、outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
5、 outline-offset /* 设置外边框 */
outline: 2px solid red;
/* 设置外边框的偏移量 */
outline-offset: 1px;
2、css3多列
1、通过css3可以通过创建多个列来对文本进行布局，多列属性
1）创建多列
column-count：分成多列，设置兼容的前缀
-moz-column-count: 3;
-webkit-column-count: 2;
2）指定列之间的差距
column-gap：设置列之间的距离规则。距离列之间有多少像素
-webkit-column-gap: 140px;
3）列规则
column-rule：设置列之间的线条。线条宽度，线条，颜色
-webkit-column-rule: 3px solid red;
3、css3透明度
1、opacity：设置元素的不透明级别
2、rgba元素的规定：rgba（red，green，blue，alpha）
alpha参数指的就是透明度，0完全透明，1完全不透明
3、background-color: red;
/* 设置透明，缺点：文字也会跟着透明 */
opacity: 0.3;
4、 background-color: rgba(255, 0, 0, 0.3);文字不会透明
5、16进制颜色表示法：以#开头，由0-9-a-f组成
顺序：#rrggbb
代表红绿蓝
三原色
6、
4、渐变
1、语法：
/* 背景渐变 */
/* background: linear-gradient(起始方向，颜色1，颜色2); */
background: linear-gradient( gold, red);
/* 加上浏览器的私有前缀 */
/* background: -webkit-linear-gradient(left, 颜色，颜色); */
background: -webkit-linear-gradient(left, gold, red);
2、其实方向可以是方位名词，或者度数，默认是top
3、可以通过指定水平和垂直的起始位置来制作一个对角渐变
background: -webkit-linear-gradient(bottom right, gold, red);
4、可以不用设置方位名词，换成度数
background: -webkit-linear-gradient(120deg, gold, red);
5、可以使用多个颜色节点
background: -webkit-linear-gradient(left, gold, red,blue ,yellow ,green);
6、使用透明度
background: -webkit-linear-gradient(left,rgba(255,0,0,0.7),rgba(0,0,255,0.5));
7、重复性渐变epeating-linear-gradient
颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色。
background: -webkit-repeating-linear-gradient(10deg,red 10% ,blue 15%);
8、径向渐变：radial-gradient
1、参数只有颜色，参数只有颜色:颜色均匀分布，会模糊化
background: -webkit-radial-gradient(red ,blue);
2、参数不均匀分布，按照比例，颜色会更具体
background: -webkit-radial-gradient(red 25%,blue 90%);
3、设置形状，circle表示圆形，ellipse表示椭圆形
background: -webkit-radial-gradient(ellipse, red ,blue );
4、重复的线性渐变
颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色
background:-webkit-repeating-radial-gradient(red 15%,yellow 25%,green 30%)
线性渐变代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>径向渐变</title>
<style>
div {
width: 200px;
height: 200px;
float: left;
border: 1px solid black;
}
section :nth-child(1) {
/* 1、参数只有颜色:颜色均匀分布 */
background: -webkit-radial-gradient(red ,blue);
}
section :nth-child(2) {
/* 2、参数不均匀分布，按照比例 */
background: -webkit-radial-gradient( red 25%,blue 90%);
}
section :nth-child(3) {
width: 400px;
/* 椭圆可以和第二个做一下对比 */
/* 3、设置形状，circle表示圆形，ellipse表示椭圆形 */
background: -webkit-radial-gradient(ellipse, red ,blue ,green);
}
section :nth-child(4) {
/* 5、重复的线性渐变
颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色。 */
background:-webkit-repeating-radial-gradient(red 15%,yellow 25%,green 30%)
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
径向渐变代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>径向渐变</title>
<style>
div {
width: 200px;
height: 200px;
float: left;
border: 1px solid black;
}
section :nth-child(1) {
/* 1、参数只有颜色:颜色均匀分布 */
background: -webkit-radial-gradient(red ,blue);
}
section :nth-child(2) {
/* 2、参数不均匀分布，按照比例 */
background: -webkit-radial-gradient( red 25%,blue 90%);
}
section :nth-child(3) {
width: 400px;
/* 椭圆可以和第二个做一下对比 */
/* 3、设置形状，circle表示圆形，ellipse表示椭圆形 */
background: -webkit-radial-gradient(ellipse, red ,blue ,green);
}
section :nth-child(4) {
/* 5、重复的线性渐变
颜色后面跟的百分比是这个颜色值距离起点的开始位置，30%就是距离起点30%开始这个颜色。 */
background:-webkit-repeating-radial-gradient(red 15%,yellow 25%,green 30%)
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
设置多列代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3多列</title>
<style>
div{
width: 800px;
height: 1200px;
line-height: 30px;
margin: 0 auto;
/* 分成多列，设置兼容的前缀 */
-moz-column-count: 3;
-webkit-column-count: 2;
/* 设置列之间的距离规则。距离列之间有多少像素 */
-webkit-column-gap: 140px;
/* 设置列之间的线条。线条宽度，线条，颜色 */
-webkit-column-rule: 5px solid red;
}
</style>
</head>
<body>
<div>
黄鹤楼送孟浩然之广陵
[作者] 李白 [朝代] 唐
故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，唯见长江天际流。
将进酒·君不见
[作者] 李白 [朝代] 唐
君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌...
送元二使安西
[作者] 王维 [朝代] 唐
渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。
小池
[作者] 杨万里 [朝代] 宋
泉眼无声惜细流，树阴照水爱晴柔。小荷才露尖尖角，早有蜻蜓立上头。
春日
[作者] 朱熹 [朝代] 宋
胜日寻芳泗水滨，无边光景一时新。等闲识得东风面，万紫千红总是春。
咏柳
[作者] 贺知章 [朝代] 唐
碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。
木兰诗 / 木兰辞
[作者] 佚名 [朝代] 南北朝
唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。东市买骏马，西市买鞍鞯...
元日
[作者] 王安石 [朝代] 宋
爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
春望
[作者] 杜甫 [朝代] 唐
国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。烽火连三月，家书抵万金。白头搔更短，浑欲不胜簪。
望庐山瀑布
[作者] 李白 [朝代] 唐
日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。
清明
[作者] 杜牧 [朝代] 唐
清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。
悯农·其一
[作者] 李绅 [朝代] 唐
春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。
饮湖上初晴后雨二首·其二
[作者] 苏轼 [朝代] 宋
水光潋滟晴方好，山色空蒙雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。
静夜思
[作者] 李白 [朝代] 唐
床前明月光，疑是地上霜。举头望明月，低头思故乡。
古风二首 / 悯农二首
[作者] 李绅 [朝代] 唐
春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
悯农
[作者] 李绅 [朝代] 唐
锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
泊船瓜洲
[作者] 王安石 [朝代] 宋
京口瓜洲一水间，钟山只隔数重山。春风又绿江南岸，明月何时照我还？
春夜喜雨
[作者] 杜甫 [朝代] 唐
好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。
村居
[作者] 高鼎 [朝代] 清
草长莺飞二月天，拂堤杨柳醉春烟。儿童散学归来早，忙趁东风放纸鸢。
</div>
</body>
</html>
5174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
