首頁 > 開發者 > JavaScript

#8.11.16總結#CSS常用樣式總結（二），

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

#8.11.16總結#CSS常用樣式總結（二），

border  邊框

簡寫：border:1px solid #000;
等效於：border-width:1px;border-style:solid;border-color:#000;
順序：border-width | border-style | border-color

border-style

 

border-radius  圓角半徑

設定或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設定1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則預設等於第1個參數

  • 水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。
  • 如果只提供一個，將用於全部的於四個角。
  • 如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。
  • 如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。
  • 垂直半徑也遵循以上4點。
  • 對應的指令碼特性為borderRadius。
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>border-radius_CSS參考手冊_web前端開發參考手冊系列</title><meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}.test .one{border-radius:10px;}.test .two{border-radius:10px 20px;}.test .three{border-radius:10px 20px 30px;}.test .four{border-radius:10px 20px 30px 40px;}.test2 .one{border-radius:10px/5px;}.test2 .two{border-radius:10px 20px/5px 10px;}.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}</style></head><body><h2>水平與垂直半徑相同時：</h2><ul class="test">    <li class="one">提供1個參數<br />border-radius:10px;</li>    <li class="two">提供2個參數<br />border-radius:10px 20px;</li>    <li class="three">提供3個參數<br />border-radius:10px 20px 30px;</li>    <li class="four">提供4個參數<br />border-radius:10px 20px 30px 40px;</li></ul><h2>水平與垂直半徑不同時：</h2><ul class="test2">    <li class="one">提供1個參數<br />border-radius:10px/5px;</li>    <li class="two">提供2個參數<br />border-radius:10px 20px/5px 10px;</li>    <li class="three">提供3個參數<br />border-radius:10px 20px 30px/5px 10px 15px;</li>    <li class="four">提供4個參數<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li></ul></body></html>

用border寫出一個三角形

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>border</title>    <style>        div{            width: 0;            height: 0;            border: 100px solid #f00;            border-top: none;            border-left-color:transparent;            border-right-color: transparent;        }    </style></head><body><div></div></body></html>

用border-radius寫出一個半圓

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>border</title>    <style>        div{            width: 100px;            height: 50px;            background-color:red;            border-radius:50px 50px 0 0;        }    </style></head><body><div></div></body></html>

用border來畫彩色四邊矩形

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>border</title>    <style>        div{            width: 0;            height:0;            border-top:100px solid red;            border-right:100px solid yellow;            border-bottom:100px solid blue;            border-left:100px solid green;        }    </style></head><body><div></div></body></html>

border-image

  • <' border-image-source '>：設定或檢索對象的邊框是否用映像定義樣式或映像來源路徑。
  • <' border-image-slice '>：設定或檢索對象的邊框背景圖的分割方式。
  • <' border-image-width '>：設定或檢索對象的邊框厚度。
  • <' border-image-outset '>：設定或檢索對象的邊框背景圖的擴充。
  • <' border-image-repeat '>：設定或檢索對象的邊框映像的平鋪方式。

box-shadow 

box-shadow: X軸位移量 Y軸位移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顏色] [投影方式];

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>box-shadow_CSS參考手冊_web前端開發參考手冊系列</title><meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /><style>.test li {    margin-top: 20px;    list-style: none;    width: 400px;    padding: 10px;    background: #eee;}.test .outset {    box-shadow: 5px 5px rgba(0, 0, 0, .6);}.test .outset-blur {    box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);}.test .outset-extension {    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);}.test .inset {    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;}.test .multiple-shadow {    box-shadow:        0 0 5px 3px rgba(255, 0, 0, .6),        0 0 5px 6px rgba(0, 182, 0, .6),        0 0 5px 10px rgba(255, 255, 0, .6);}</style></head><body><ul class="test">    <li class="outset">外陰影常規效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>    <li class="outset-blur">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>    <li class="outset-extension">外陰影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>    <li class="inset">內陰影製作效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>    <li class="multiple-shadow">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li></ul></body></html>

line-height 控制段落裡每行高度

p { line-height:25px;}

text-indent控制段落的首行縮排

p { text-indent:2em;}

text-align 控制段落對齊，不但是文本，對象中的其它inline或inline-block元素也能夠被text-align進行對齊的設定。

p { text-align:right;}

letter-spacing 控制段落的文字間的距離

p { letter-spacing:5px;}

text-overflow 控制文字內容溢出部分的樣式

但是text-overflow只是用來解說文字溢出時用什麼方式顯示，要實現溢出時產生省略符號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略符號的效果。 

div,input{    overflow: hidden;    /*條件1：超出部分隱藏*/    white-space: nowrap;/*條件2：強制在同一行內顯示所有文本*/    text-overflow: ellipsis;/*超出部分顯示。。。*/}

word-wrap 控制內容超過容器的邊界時是否斷行

background 

  • background-color           規定要使用的背景顏色。
  • background-position       規定背景映像的位置。
  • background-size             規定背景圖片的尺寸。
  • background-repeat         規定如何重複背景映像。
  • background-origin          規定背景圖片的定位地區。
  • background-clip             規定背景的繪製地區。
  • background-attachment  規定背景映像是否固定或者隨著頁面的其餘部分滾動。
  • background-image         規定要使用的背景映像。

linear-gradient 線性漸層

 

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

 

{background-image:linear-gradient(left, red 100px, yellow 200px);}

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More