码迷,mamicode.com
首页 > Web开发 > 详细

CSS笔记四.....

时间:2016-08-12 01:01:32      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

1.border-width:边框宽度。

<style>
            .div {
               border-top-width:1px;
               border-right-width:2px
               border-bottom-width:3px;
               border-left-width:4px;
            }
</style>
<body>
          <div class="div"></div>
</body>

2.border-color:边框颜色。

<style>
            .div {
               border-top-color:red;
               border-right-color:blue;
               border-bottom-color:green;
               border-left-color:yellow;
            }
</style>
<body>
          <div class="div"></div>
</body>

3.border-style:边框线样式。

<style>
            .div {
               border-top-style:solid;
               border-right-style:solid;
               border-bottom-style:dashed;
               border-left-style:dashed;
            }
</style>
<body>
          <div class="div"></div>
</body>

4.border:边框。

<style>
            .div {
               width:20px;
               height:20px;
               border:1px solid red;
            }
</style>
<body>
          <div class="div"></div>
</body>

5.border-radius:圆角。

<style>
            .div {
               border-radius:50%;
               border-radius:1px 2px 3px 4px;
            }
</style>
<body>
          <div class="div"></div>
</body>

6.border-image:边框背景图片。

<style>
            .div {
               border-image:url(‘图片路径‘) no-repeat center center;
            }
</style>
<body>
          <div class="div"></div>
</body>

7.box-shadow:盒子模型。

<style>
            .div {
               border-shadow:5px 5px 10px 5px rgba(0,0,255,0.5);
               border-shadow:5px 5px 10px 5px rgba(0,0,255,0.5) inset;
            }
</style>
<body>
          <div class="div"></div>
</body>

8.line-height:行高。

<style>
            .div {
               width:20px;
               height:20px;
               line-height:20px
            }
</style>
<body>
          <div class="div">我是DIV元素</div>
</body>

9.text-indent:段落的首行缩进。

<style>
            .div {
              text-indent:2em;
            }
</style>
<body>
          <div class="div">我是DIV标签</div>
</body>

10.text-align:文本的对其方式,属性值:left/right/center/justify。

<style>
            .div {
              text-align:left;
            }
</style>
<body>
          <div class="div">我是DIV标签</div>
</body>

11.letter-spacing:文字间距。

<style>
            .div {
              letter-spacing:5px;
            }
</style>
<body>
          <div class="div">我是DIV标签</div>
</body>

12.text-overflow:控制文字溢出部分样式。属性值:clip/ellipsis。

<style>
           .div {
                  overflow:hidden;
                 white-space:nowrap;
                 text-overflow:ellipsis;
         }
</style>
<body>
       <div class="div">一二三四五六七八九十</div>
</body>

13.word-wrap:断行。属性值:normal/break-word。

<style>
           .div {
                 word-wrap:break-word;
         }
</style>
<body>
       <div class="div">hahhahahahahhahahahahahahahahahahahahahahahah</div>
</body>

14.background-color:背景颜色。属性值:transparent/color。

<style>
           .div {
                 background:#ccc;
         }
</style>
<body>
       <div class="div"></div>
</body>

15.rgba:红、绿、蓝、透明度。

<style>
           .div {
                 background:rgba(255,255,255,0.5);
         }
</style>
<body>
       <div class="div"></div>
</body>

16.linear-gradient:线性渐变。

<style>
           .div {
               background-image:linear-gradient(to top red 40% blue);
         }
</style>
<body>
       <div class="div"></div>
</body>

17.background-image:背景图片。

<style>
           .div {
               background-image:url("图片路径") no-repeat center center;
         }
</style>
<body>
       <div class="div"></div>
</body>

18.background-repeat:no-repeat/repeat-x/repeat-y。

<style>
           .div {
               background-repeat:repeat-x;
         }
</style>
<body>
       <div class="div"></div>
</body>

19.background-position:对齐方式。

<style>
           .div {
               background-position:left bottom;
         }
</style>
<body>
       <div class="div"></div>
</body>

20.background:背景。

<style>
           .div {
               background:url("图片路径") no-repeat center center #ccc;
         }
</style>
<body>
       <div class="div"></div>
</body>

  

CSS笔记四.....

标签:

原文地址:http://www.cnblogs.com/lss-bk/p/5762561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!