学习笔记-CSS-2017.2.16

一、图片库

<style type="text/css">
.pic{
    float: left;
    padding: 2px;
    width: auto;
    height: auto;
    border: 1px solid #ccc;
    margin: 3px;
    text-align: center;
}
.pic img{
    border:1px solid #ccc;
    display: inline;
    margin: 3px;
}
.pic img:hover{
    border: 1px solid #000;
}
.content{
    text-align: center;
}

</style>
<div class="pic">
        <a href="#">![](images/1.jpg)</a>
        <div class="content">XXXXXX</div>
</div>
<div class="pic">
        <a href="#">![](images/1.jpg)</a>
        <div class="content">XXXXXX</div>
</div>
<div class="pic">
        <a href="#">![](images/1.jpg)</a>
        <div class="content">XXXXXX</div>
</div>
<div class="pic">
        <a href="#">![](images/1.jpg)</a>
        <div class="content">XXXXXX</div>
</div>

二、CSS 图像透明/不透明

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

1、图像透明度 - Hover 效果

.pic img{
    border:1px solid #ccc;
    display: inline;
    margin: 3px;
    opacity: 0.4;
    width: 250px;
    height: 200px;
}
.pic img:hover{
    border: 1px solid #000;
    opacity: 1
}

2、透明框中的文本

<style type="text/css">
.contentbox{
    background: url("images/2.jpg");
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
}

.transbox{
    width: 300px;
    height: 300px;
    margin: 50px;
    background-color: #fff;
    opacity: 0.5
}
.transbox p{
    padding: 30px;
}
</style>
    <div class="contentbox">
        <div class="transbox">
            <p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.</p>
        </div>
    </div>

三、CSS2 媒介类型

@media 规则允许在相同样式表为不同媒体设置不同的样式。

四、CSS3 边框

1、圆角边框和阴影

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

<style type="text/css">
    .radius{
        border: 1px solid #000;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 5px 5px 5px #ccc;
    }
</style>
    <div class="radius">
        this is a demo
    </div>

2、边界图片

<style type="text/css">
    .radius{
        -webkit-border-image:url(images/3.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(images/3.png) 30 30 round; /* Opera */
    border-image:url(images/3.png) 30 30 round;
    }
    
</style>
    <div class="radius">
        this is a demo
    </div>

五、CSS3 背景

1、background-size 属性

<style type="text/css">
    .radius{
        background: url("images/2.jpg") no-repeat;
        background-size: 80px 100px;
        padding: 100px;
    }
    
</style>
    <div class="radius">
        this is a demo
    </div>

2、background-Origin属性

3、background-clip属性

<style type="text/css">
    #example1 {
    border: 10px dotted black;
    padding:15px;
    background: yellow;
}
    #example2 {
    border: 10px dotted black;
    padding:15px;
    background: yellow;
    background-clip: padding-box;
}
    
    #example3 {
    border: 10px dotted black;
    padding:15px;
    background: yellow;
    background-clip: content-box;
}
</style>

    <p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

六、 渐变（Gradients）

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变 - 从上到下（默认情况下）


#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

线性渐变 - 从左到右


#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

线性渐变 - 对角


#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

使用角度

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>

使用多个颜色结点

<style type="text/css">
div.hk{ height: 200px;
background: linear-gradient(red 10%,  yellow 20%, blue 30% ,green 40%); 
background: -webkit-linear-gradient(red 10% , yellow 20% ,blue 30% ,green 40%);
background: -o-linear-gradient(red 10% , yellow 20%, blue 30%, green 40%);
background: -moz-linear-gradient(red 10% , yellow 20% ,blue 30% green 40%);
}
</style>
    <div class="hk">this is a demo.</div>

使用透明度（Transparency）

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
}

重复的线性渐变

#grad1 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}

CSS3 径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

规则分布


div.hk{ 
    height: 150px;
    widows: 200px;
    background:radial-gradient(red,green,blue);
    background: -webkit-radial-gradient(red,green.blue);
    background: -moz-radial-gradient(red,green,blue);
    background: -o-radial-gradient(red,green,blue);
}

不规则分布

div.hk{ 
    height: 150px;
    widows: 200px;
    background:radial-gradient(red 10%,green 30%,blue 20%);
    background: -webkit-radial-gradient(red 10%,green 30%,blue 20%);
    background: -moz-radial-gradient(red 10%,green 30%,blue 20%);
    background: -o-radial-gradient(red 10%,green 30%,blue 20%);
}

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

七、CSS3 2D 转换

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 渐变（Gradients）
    CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平...
    鹿守心畔光阅读 3,146评论 0赞 3
  • 渐变
    CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平...
    ilkswiss阅读 3,388评论 0赞 1
  • css样式学习-渐变
    CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的...
    Dl_毛良伟阅读 3,188评论 0赞 3
  • 【0805晨读感悟】无题
    《如何成为一个学习忍者》中提到了打造高效行动体系的三个微习惯： 每天固定时间充电； 学会使用思考、组织、资源等工具...
    凌凌喵阅读 897评论 2赞 1
  • 2017-10-06
    我的心就好像死了一样 我好怕这辈子就这样了无生趣。 2017.10.6
    SweetCC阅读 903评论 0赞 0