文档章节

css 总结2

tianyawhl
 tianyawhl
发布于 11/14 10:46
字数 1103
阅读 8
收藏 0

1、背景有关

(1)background-origin:border-box、padding-box、content-box //默认是padding-box

(2)background-image: url(img_flwr.gif), url(paper.gif);

(3)background-position: right bottom, left top;

(4)background-repeat: no-repeat、 repeat;

(5)background-attachment:fixed //固定背景的位置,不随滚动条滚动

background-origin是css新增属性,在此基础上可以用background-position进行偏移。两者没有可比性,是配合使用的,不能相互替代。

背景的简写:background:url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px;

也可以多加一个背景颜色:background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px;

也可以设置离右边的距离:background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat right 5px top 5px/25px;

 2、图片有关

img {
   position:absolute;            //必须
   clip:rect(0px 50px 200px 0px) //裁切方向top, right, bottom, left,始终是距离左边或者上边的距离
}

img {
   opacity:0.4;
   filter:alpha(opacity=40); /* For IE8 and earlier */
}

3、边框有关

border-radius采用的是左上角、右上角、右下角、左下角的顺序

border-radius:2em;
等价于:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;  //  “/”前面是水平方向半径  ,“/”后面是垂直方向半径
等价于:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

4、阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    必需。水平阴影的位置。允许负值。    
v-shadow    必需。垂直阴影的位置。允许负值。    
blur        可选。模糊距离。    
spread        可选。阴影的尺寸。    
color        可选。阴影的颜色。请参阅 CSS 颜色值。    
inset        可选。将外部阴影 (outset) 改为内部阴影。

例子:box-shadow: 10px 10px 5px #888888;

5、2D转换

     5种方法

  • translate()   //相对于自身的位置变换(在应该在的位置上变换)
  • rotate()
  • scale()
  • skew()
  • matrix()

 div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}
div
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

translate(x,y)    定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n)    定义 2D 转换,沿着 X 轴移动元素。
translateY(n)    定义 2D 转换,沿着 Y 轴移动元素。

scale(x,y)    定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n)    定义 2D 缩放转换,改变元素的宽度。
scaleY(n)    定义 2D 缩放转换,改变元素的高度。

transform:translate(0 ,-50%) rotate(45deg);

6、3D转换

perspective属性,设置从何处查看一个元素的角度,浏览器支持 ie10之上
多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图
定义的perspective属性它是应用在元素的子元素而不是元素本身

perspective-origin 属性 观察者的位置,观察者可移动的区域就是被观察的物体未变换前的区域范围 默认值为50% 50%(即观察范围的中心)
transform-style :flat| preserve-3d ,默认是flat preserve-3d意思是被转换的子元素保存其3D转换(即如果是preserve-3d 看起来像穿透一个平面,而不是近大远小的视觉)

7、transtion过渡 

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

div:hover { width:300px; }

8、CSS3 @keyframes

 

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

上面是下面的简写
div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

彻底让IE, FireFox, Chrome等浏览器下的a标签链接域键盘事件拜拜了。示例代码如下:

<a class="tab_a tab_on" style="pointer-events:none;">年终奖</a>

文字占满容器宽度,兼容性不好

<div>这世间唯有梦想和好姑娘不可辜负!<i></i></div>
div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}
div i{
  display:inline-block;
  width:100%;
}

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 3
博文 226
码字总数 115636
作品 0
常州
前端工程师
私信 提问
Angular中ng-model指令根据表单域状态添加css类的“空格”问题

一、ng-model指令根据表单域的状态添加/移除以下类: ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine 二、Angular在css中添加类的时候......

coolrp
2016/11/30
205
0
前端开发面试题总结之——CSS3

相关知识点 题目&答案 如何理解CSS的盒子模型? link和@import的区别? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? 如何居中div,如何居中一个浮动元素...

sandisen
2017/02/18
0
0
QSS知识总结

QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观。 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开。 它的语法和概念和HTML CS...

tiankefeng0520
2014/05/27
0
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
0
0
JavaScript之选择器

作为一个前端,利用JavaScript查找DOM元素是很经常的事。jQuery的选择器很强大,但是这并就不意味着我们不需要掌握原生js查找DOM的方法了。下面总结了一些查找DOM的方法。 1. 通过ID选取元素...

liu_yong
2016/11/10
22
0

没有更多内容

加载失败,请刷新页面

加载更多

Kylin2.5.0环境搭建及操作记录

Apache Kylin是一个开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区。它能在亚秒内查询巨大的H...

PeakFang-BOK
5分钟前
0
0
SpringBoot整合es

文档对像 @Document(indexName = "bigdata",type = "tag")public class User { @Idprivate String openid; private List<String> tags;public String getOpenid() ......

魔法王者安琪拉
9分钟前
0
0
windows下让 jar 在后台运行的办法

windows下 运行 java jar 不出现 命令行 窗口 新建一个披处理 run.bat,内容如下 @echo off start javaw -jar xx.jar exit 双击运行即可。...

glen_xu
18分钟前
1
0
jdk1.8 lambda stream 指定的对象属性进行去重

原因:因为Stream提供的distinct()方法只能去除重复的对象,无法根据指定的对象属性进行去重,可以应付简单场景。 解决方案: //去重,共同信息保存到bizPledgeSupplierVOs里bizPledgeSupp...

INSISTQIAO
20分钟前
0
0
vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制

定义[nextTick、事件循环] nextTick的由来: 由于vue的数据驱动视图更新是异步的,即修改数据的当下,视图不会立即更新,而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。...

JamesView
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部