叶子网络bbs论坛

标题: css3标签整理 [打印本页]

作者: rain 时间: 2014-10-11 09:14
标题: css3标签整理
兼容处理：css3的兼容性不是很好，一般要注意加上兼容处理：
-moz-    兼容老版本的  firefox 浏览器
-webkit- safari 和  chrome
-o-          opera
-ms- IE 9 个别情况下需要加
属性简介：
1、border-radius       边框变为圆角
例：border-radius:25px;border-radius:X/Y 水平半径/垂直半径
2、box-shadow       加阴影
例：box-shadow: 10px 10px 5px #888888;
水平偏移量、垂直偏移量、模糊半径、颜色值四个值多了个spread扩展距离，inset收缩。双重阴影用逗号隔开。
3、border-image       用图片作为边框
例：border-image:url(border.png) 30 30 round;
4、text-shadow    文字加阴影
例：text-shadow: 5px 5px 5px #FF0000;
5、word-wrap    对超出框架的文字进行强制断行
例：word-wrap:break-word;对长单词进行拆分，并换行到下一行
6、transition    设置过渡效果
例：  transition: all 0.5s ease 0s;
7、animation    @keyframes 制作动画效果
例：animation:myfirst 5s linear 2s infinite alternate;
@keyframes myfirst
{
0% {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
8、background-size 定义背景图片尺寸
background-origin：content-box、padding-box 或 border-box    定义背景图片显示区域
background-clip       规定背景的绘制区域
background-image:url(bg_flower.gif),url(bg_flower_2.gif);    双背景

9、@font-face    把特殊字体传到服务器上调用
例：@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
   url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

10、transform 2D转换旋转
transform: rotate(30deg); 旋转       transform: rotateX(120deg); rotateY 围绕x轴、y轴旋转  transform:translate(50px,100px); 位移
transform: scale(2,4);  宽度和高度增加的倍数 transform:skew(10deg,10deg);  围绕x轴和y轴翻转的度数
transform:matrix(0.866,0.5,-0.5,0.866,0,0); 旋转30度

11、opacity 设置 div 元素的不透明级别：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

12、多列
column-count:3 ;             分隔的列数
column-gap:40px;          列之间的间隔
column-rule:3px outset #ff0000;          列之间分割线的样式

13、用户界面
resize:both;    可由用户调整元素尺寸
outline:2px solid red; outline-offset:15px; 边框边缘之外绘制轮廓

作者: admin 时间: 2017-6-20 23:07
多重背景

.night-sky {
background-color: navy; /* fallback color */
background-image:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
background-position:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-x;

复制代码

简写：

.night-sky {
/* fallback with both a color and image */
background: navy url(../img/ufo.png) no-repeat center bottom;
/* for supporting browsers */
background:
url(../img/ufo.png) no-repeat 100% 100%,
url(../img/stars.png) no-repeat 100% -150px,
url(../img/stars.png) no-repeat 0 -150px,
url(../img/sky.png) repeat-x 50% 100%;

复制代码

作者: admin 时间: 2017-6-21 11:50
渐变背景
background: linear-gradient(silver, black); 默认从上到下渐变。线性渐变。
background: linear-gradient(to left, silver, black); 从右到左。
background: linear-gradient(to bottom right, aqua, navy); 从左上方向右下方渐变。
background: linear-gradient(120deg, aqua, navy); 上方0度，右侧90度，下方180度，左侧270度。数值代表渐变结束的点。
background: linear-gradient(yellow 10%, green);用百分数指定颜色停止位置。
background: linear-gradient(to top right, yellow, green 70%, blue);指定颜色位置。

background: radial-gradient(yellow, red); 径向渐变。
background:radial-gradient(at top, yellow, red)；从顶部开始。
background: radial-gradient(100px 50px, yellow, red); 横向纵向尺寸
background:radial-gradient(70% 90% at bottom left, yellow, red); 尺寸比例
background: radial-gradient(closest-side at 70px 60px, yellow, lime, red); 起点位置
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red); 渐变尺寸+起点位置

作者: admin 时间: 2017-6-21 18:05
生成内容效果 :before :after
.more:after {
content: " »";
} 添加一个箭头符号。

控制气泡的悬停出现：

/* SHOW AND HIDE
------------------------------------- */
.map:hover {
cursor: pointer;
}
.cities {
left: -999em; /* hide by default by positioning off screen */
}
.map:focus + .cities,
.map:hover + .cities {
left: 50%;
}

复制代码

开始显示于屏幕之外，悬停时重新定位位置，使其可见。

作者: admin 时间: 2017-6-22 16:59
transparent 用法之 css绘制三角形：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

.triangle3{
width:0px;
height:0px;
border:solid transparent;
border-left-color:red;
border-width:100px;
}

作者: admin 时间: 2017-6-23 11:06
css sprite css精灵
是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
前端：

<ul class="documents">
<li><a href="expenses.xls" class="icon">Business expenses</a></li>
<li><a href="user-manual.pdf" class="icon">User Manual</a></li>
<li><a href="story.docx" class="icon">Short story</a></li>
<li><a href="brochure.pdf" class="icon">Vacation brochure</a></li>
</ul>

复制代码

css：

.icon {
display: inline-block;
line-height: 1.1;
font-size: .875em;
min-height: 16px; /* set to height of icon so it isn't cut off at all */
padding-left: 23px;
padding-top: 2px;
/* allows positioning the icon absolutely
relative to elements with class="icon" in the HTML */
position: relative;
}
.icon:before {
background-image: url(../img/sprite.png);
content: " ";
display: block;
height: 16px; /* icon height */
left: 0; /* default. change this if want the icon to appear in different spot */
position: absolute;
width: 16px; /* icon width */
top: 0; /* default. change this if want the icon to appear in different spot */
}
/* Shift position of sprite image for any
document filename that ends with .xls */
a[href$=".xls"]:before {
background-position: -17px 0;
}
/* Shift position of sprite image for any
document filename that ends with .docx */
a[href$=".docx"]:before {
background-position: -34px 0;
}

复制代码

效果：

欢迎光临叶子网络bbs论坛 (https://fob0.com/)