Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

CSS3样式基础总结

Posted on 2013年5月9日 by 九九 / 1762 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

CSS, CSS3, Div
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
实现登录窗体浏览器始终居中
Newer post
20个案例掌握PL/SQL基础

标签云

2019ncov Android ASP.NET Baby C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2023年3月
  • 2023年2月
  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary