请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 23180|回复: 5

css3标签整理

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
发表于 2014-10-11 09:14:25 | 显示全部楼层 |阅读模式
兼容处理: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;    边框边缘之外绘制轮廓



回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-20 23:07:01 | 显示全部楼层
多重背景
  1. .night-sky {
  2.         background-color: navy; /* fallback color */
  3.         background-image:
  4.                  url(../img/ufo.png),
  5.                  url(../img/stars.png),
  6.                 url(../img/stars.png),
  7.                 url(../img/sky.png);

  8.         background-position:
  9.                  50% 102%,
  10.                  100% -150px,
  11.                  0 -150px,
  12.                  50% 100%;

  13.         background-repeat:
  14.                 no-repeat,
  15.                 no-repeat,
  16.                 no-repeat,
  17.                 repeat-x;
复制代码
简写:
  1. .night-sky {
  2.         /* fallback with both a color and image */
  3.         background: navy url(../img/ufo.png) no-repeat center bottom;
  4.        
  5.         /* for supporting browsers */
  6.         background:                
  7.                 url(../img/ufo.png) no-repeat 100% 100%,
  8.                 url(../img/stars.png) no-repeat 100% -150px,
  9.                 url(../img/stars.png) no-repeat 0 -150px,
  10.                 url(../img/sky.png) repeat-x 50% 100%;
复制代码




回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-21 11:50:05 | 显示全部楼层
渐变背景
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);指定颜色位置。

1.png 2.png
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); 渐变尺寸+起点位置



回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-21 18:05:37 | 显示全部楼层
生成内容效果   :before    :after
.more:after {
    content: " »";
}             添加一个箭头符号。

控制气泡的悬停出现:
  1. /* SHOW AND HIDE
  2. ------------------------------------- */
  3. .map:hover {
  4.         cursor: pointer;
  5. }

  6. .cities {
  7.         left: -999em; /* hide by default by positioning off screen */
  8. }

  9. .map:focus + .cities,
  10. .map:hover + .cities {
  11.         left: 50%;
  12. }
复制代码
开始显示于屏幕之外,悬停时重新定位位置,使其可见。

回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-22 16:59:56 | 显示全部楼层
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;
}
3.png
回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-23 11:06:28 | 显示全部楼层
css sprite     css精灵
是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
前端:
  1. <ul class="documents">
  2.         <li><a href="expenses.xls" class="icon">Business expenses</a></li>
  3.         <li><a href="user-manual.pdf" class="icon">User Manual</a></li>
  4.         <li><a href="story.docx" class="icon">Short story</a></li>
  5.         <li><a href="brochure.pdf" class="icon">Vacation brochure</a></li>
  6. </ul>
复制代码
css:
  1. .icon {
  2.         display: inline-block;
  3.         line-height: 1.1;
  4.         font-size: .875em;
  5.         min-height: 16px; /* set to height of icon so it isn't cut off at all */
  6.         padding-left: 23px;
  7.         padding-top: 2px;

  8.         /* allows positioning the icon absolutely
  9.         relative to elements with class="icon" in the HTML */
  10.         position: relative;
  11. }

  12. .icon:before {
  13.         background-image: url(../img/sprite.png);
  14.         content: " ";
  15.         display: block;
  16.         height: 16px; /* icon height */
  17.         left: 0; /* default. change this if want the icon to appear in different spot */
  18.         position: absolute;
  19.         width: 16px; /* icon width */
  20.         top: 0; /* default. change this if want the icon to appear in different spot */
  21. }

  22. /* Shift position of sprite image for any
  23. document filename that ends with .xls */
  24. a[href$=".xls"]:before {
  25.         background-position: -17px 0;
  26. }

  27. /* Shift position of sprite image for any
  28. document filename that ends with .docx */
  29. a[href$=".docx"]:before {
  30.         background-position: -34px 0;
  31. }
复制代码
效果:
11.png
回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-29 05:31 , Processed in 0.285399 second(s), 27 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表