Front-End

CSS3样式基础总结

Posted on by 九九 / 1817 Views

学习了一下CSS3的内容,做一个小小的总结,以备参考.

以下所有代码均在Chrome浏览器下运行测试.

1.圆角边框: border-radius

div部分:

<div class="div1"></div>

CSS3部分:

.div1{width:200px;height:30px;background-color:#dddddd;border:2px solid;border-radius:25px;} /*border:2px solid;边框2px,显示边框*/

效果:

2.向边框添加阴影:box-shadow

div部分:

<div class="div2"></div>

CSS3部分:

.div2{width:200px;height:30px;background-color:Blue;box-shadow:10px 10px 5px lightblue;}

效果:

3.边框图片 border-image

div部分:

<div class="div3"></div><br />
<div class="div4"></div>

CSS3部分:

.div3{width:200px;height:30px;background-color:blue;-webkit-border-image:url(border.png) 30 30 round;}
.div4{width:200px;height:30px;background-color:blue;-webkit-border-image:url(border.png) 30 30 stretch;}

引用的图片 border.png:

效果图:

4.背景图片尺寸:background-size 自由缩小放大

div部分:

<div class="div5"></div>

CSS3部分:

.div5{height:60px;background:url(bg_flower.gif);background-size:40px 60px;background-repeat:no-repeat;}
/*background-size 根据像素或百分比自由缩小放大背景图片,这里的px也可以使用%*/

引用图片 bg_flower.gif:

效果:

5.在Content-box中定位背景图片:

div部分:

<div class="div6">这是div6这是div6这是div6这是div6这是div6这是div6这是div6这是div6这是div6</div>
<div class="div7">这是div7这是div7这是div7这是div7这是div7这是div7这是div7这是div7这是div7</div>
<div class="div8">这是div8这是div8这是div8这是div8这是div8这是div8这是div8这是div8这是div8</div>

CSS3部分:

.div6{width:200px;height:180px;background-image:url(bg_flower.gif);border:15px solid lightblue;background-repeat:no-repeat;background-position:left;padding:15px;background-origin:border-box;}
.div7{width:200px;height:180px;background-image:url(bg_flower.gif);border:15px solid lightblue;background-repeat:no-repeat;background-position:left;padding:15px;background-origin:padding-box;}
.div8{width:200px;height:180px;background-image:url(bg_flower.gif);border:15px solid lightblue;background-repeat:no-repeat;background-position:left;padding:15px;background-origin:content-box;}

效果图:

6.文本阴影: text-shadow

div部分:

<div class="div9">这是div9</div>

CSS3部分:

.div9{width:200px;height:50px;text-shadow:2px 2px 2px red}/*越大越模糊*/

效果图:

7.自动换行 :word-wrap

不加会在长单词时超出边界

div部分:

<p class="p10">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

CSS3部分:

.p10{width:11em;border:1px solid black;word-wrap:break-word;}
/*话说一直没感受出来,网上一搜索看到3cschool中的这行英文句子才会出现这种情况,试过汉字不会出现,只有英文单词才会出现,不过貌似一个这么长的单词不会出现吧,感觉不实用,而且如果是div里面的,是会自动换行的,*/

效果图:

8.2D转换:div角度翻转 -webkit-transform

div部分:

<div class="div11">这是div11,旋转20度</div><br />
<div class="div12">这是div12,left x:30px;top y:20px,就是距离左30px,距离上20px</div><br />
<div class="div13">这是div13</div><br />
<div class="div14">这是div14</div><br />
<div class="div15">这是div15</div><br />

CSS3部分:

.div11{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:rotate(20deg)}/*旋转20度*/
.div12{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:translate(30px,20px)}
.div13{width:80px;height:30px;background-color:lightblue;border:1px solid black;-webkit-transform:scale(2,4)}
.div14{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:skew(30deg,20deg)}/* skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度*/
.div15{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0)}/* matrix() 方法需要六个参数，包含数学函数，允许你：旋转、缩放、移动以及倾斜元素*/

效果图:

9.3D转换:翻转文字 -webkit-transform

div部分:

<div class="div16">这是div16</div><br />
<div class="div17">这是div17</div><br />

CSS3部分:

.div16{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:rotateX(120deg)}/*沿x轴*/
.div17{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transform:rotateY(120deg)}/*沿y轴*/

效果图:

10.CSS3过渡: 长度渐变.色彩渐变,角度渐变 等等 -webkit-transition

div部分:

<div class="div18">这是div18,渐变长度</div><br />
<div class="div19">这是div19,多种渐变</div>

CSS3部分:

.div18{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transition:width 2s;}/*沿y轴*/
.div18:hover{width:250px;}
.div19{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-transition:width 2s,height 2s,-webkit-transform 2s,background-color 2s;}/*限定渐变的时间*/
.div19:hover{width:250px;height:200px;-webkit-transform:rotate(120deg);background-color:Green;}/*渐变->长,宽,旋转,颜色*/

效果图:

11.动画 -webkit-animation

div部分:

<div class="div20">这是div20</div><br />
<div class="div21">这是div21</div>

CSS3部分:

.div20{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-animation:myfirst 3s;}
@-webkit-keyframes myfirst
{
    from{background-color:blue;}/*初始颜色*/
    to{background-color:Green;}/*终点颜色*/
    /*结束后返回原来的颜色*/
}
.div21{width:100px;height:80px;background-color:lightblue;border:1px solid black;position:relative;/*position设置相对之后才能运动*/
    /*-webkit-animation-name:mysecond;
    -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;*/
    /*简化,效果同上*/
    -webkit-animation:mysecond 5s linear 2s infinite alternate;
    }
@-webkit-keyframes mysecond
{
    0% {background-color:lightblue;left:0px;top:0px;}
    25%{background-color:Blue;left:150px;top:0px;}
    50%{background-color:Green;left:150px;top:100px;}
    75%{background-color:lightGreen;left:0px;top:100px;}
    100%{background-color:lightblue;left:0px;top:0px;}
}

效果图:(gif录制工具实在不行,录了一个循环,实际在浏览器上渐变还不错)

ps文字补丁:div20,颜色渐变;div21,方形循环运行轨迹;

12.多列 : -webkit-column-count/gap/rule

div部分:

<div class="div22">这是div22这是div22这是div22这是div22这是div22这是div22这是div22</div><br />
<div class="div23">这是div23,规定列之间的间距</div><br />
<div class="div24">这是div24,列样式;这是div24,列样式</div>

CSS3部分:

.div22{width:150px;height:100px;background-color:lightblue;border:1px solid black;-webkit-column-count:3;}
.div23{width:150px;height:110px;background-color:lightblue;border:1px solid black;-webkit-column-count:3;-webkit-column-gap:40px;}
.div24{width:150px;height:110px;background-color:lightblue;border:1px solid black;-webkit-column-count:3;-webkit-column-rule:3px outset blue}

效果图:

如果在div24 中多加点文字呢?看效果:

13.用户界面: outline-offset

div部分:

<div class="div25">div25,可手动调整大小;div25,可手动调整大小</div><br />
<div class="div26">
   <div class="div26_">div26左半部分,规定两个带边框的方框</div>
   <div class="div26_">div26右半部分,规定两个带边框的方框</div>
</div><br />
<div class="div27">这个 div 在边框之外15 像素处有一个轮廓</div>

CSS3部分:

.div26{width:250px;height:110px;background-color:lightblue;border:1px solid black;}
.div26_{box-sizing:border-box;width:50%;border:1em solid blue;float:left;}
.div27{width:150px;height:110px;background-color:lightblue;border:1px solid black;margin-left:20px;outline:2px solid red;outline-offset:15px;}

效果图:

参考资料:Cschool

, ,
九九
过去的我们，现在的自己，往事，终会随风而逝。