歡迎使用CSDN markdown編輯器

2021-08-02 18:29:37 字數 1901 閱讀 9150

字首

-moz(例如 -moz-border-radius)用於firefox

-webkit(例如:-webkit-border-radius)用於safari和chrome。

例1

padding:10px; width:300px; height:50px;

border: 5px solid #dedede;

-moz-border-radius: 15px; /* gecko browsers */

-webkit-border-radius: 15px; /* webkit browsers */

border-radius:15px; /* w3c syntax */

}

效果:

例2:無邊框

padding:10px; width:300px; height:50px;

background:#fc9;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

}

效果:

書寫順序

/* gecko browsers */

-moz-border-radius: 5px;

/* webkit browsers */

-webkit-border-radius: 5px;

/* w3c syntax - likely to be standard so use for future proofing */

border-radius:10px;

其它支援上、右、下、左

border-radius:5px 15px 20px 25px;

支援拆分書寫

/* gecko browsers */

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 0;

-moz-border-radius-bottomleft: 0;

-moz-border-radius-bottomright: 20px;

/* webkit browsers */

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 0;

-webkit-border-bottom-left-radius: 0;

-webkit-border-bottom-right-radius: 20px;

/* w3c syntax */

border-top-left-radius: 20px;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 20px;

支援性瀏覽器 支援性

firefox(2、3+) √

google chrome(1.0.154+…) √

google chrome(2.0.156+…) √

safari(3.2.1+ windows) √

internet explorer(ie7, ie8) ×

opera 9.6 ×

歡迎使用CSDN markdow

本markdown編輯器使用stackedit修改而來,用它寫部落格,將會帶來全新的體驗哦 markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細...

歡迎毛毛與妞妞使用CSDN markdown編輯器

建立乙個自定義列表 如何建立乙個註腳 注釋也是必不可少的 katex數學公式 新的甘特圖功能,豐富你的文章 uml 圖表 flowchart流程圖 匯出與匯入 你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下mar...

歡迎使用CSDN markdow1n編輯器

本markdown編輯器使用stackedit修改而來,用它寫部落格,將會帶來全新的體驗哦 markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細...