Rumah hujung hadapan web html tutorial css3新增属性(转载)

css3新增属性(转载)

Sep 12, 2016 pm 05:27 PM

写在前面的话:

   由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀,

如:-moz-  主要是firefox火狐

      -webikt-主要是chrome谷歌,

     -o-主要是用于苹果机上的浏览器

 

一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持: 
   FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
   border: 10px solid #000;
   -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明: 
   颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
   FF3+
三. boder-image(图片边框)
使用:
    -moz-border-image: url(exam.png) 20 20 20 20 repeat;
   -webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种): 
   repeat --- 边框图片会平铺, 类似于背景重复;
   stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
    FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用: 
    text-shadow: [] || [];
说明:
(1) 和是可选的, 当未指定时, 将使用文本颜色; 当未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
   text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
    FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
    text-overflow: inherit | ellipsis | clip ;
   -o-text-overflow: inherit | ellipsis | clip;
说明: 
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持: 
   IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
    word-wrap: normal | break-word;
支持:
    IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4, Chrome 3


八.  opacity(不透明度)   
使用:
   opacity: 0.5;
   filter: alpha(opacity=50); /* for IE6, 7 */
   -ms-filter(opacity=50); /* for IE8 */
支持:
   all
九. box-sizing(控制盒模型的组成模式)
使用:
   box-sizing: content-box | border-box; // for opera
   -moz-box-sizing: content-box | border-box;
   -webkit-box-sizing: content-box | border-box;
说明:
   1. content-box: 
   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
   2. border-box: 
   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
   也不会变).
支持:
   FF3+, Opera 10, Safari 4, Chrome 3

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles