CSS3新增了哪些属性-tutorial css-php.cn

CSS3新增了哪些属性

清浅

Lepaskan： 2021-04-18 14:54:26

asal

18488 orang telah melayarinya

CSS3新增的属性有：1、文本阴影；2、背景渐变；3、颜色透明度；4、元素旋转；5、多列布局；6、字体改变等等。

CSS3新增了哪些属性

本文操作环境：Windows7系统、Dell G3电脑、css3版。

今天将和大家介绍CSS3中的新增属性，具有一定的参考价值，希望对大家有所帮助

最新版本的CSS3的出现使Web设计更容易，虽然并非所有浏览器都支持它。但是由于技术上的迅速变化，CSS3的模块化的规范化使目前所有浏览器都在实施完整的CSS3支持，相信不久之后CSS3以及HTML5 将成为网络的未来，接下来将在文章中和大家详细介绍CSS3中的新功能

浏览器兼容问题：

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

【推荐课程：CSS3教程】

CSS3文字阴影

<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>

Salin selepas log masuk

Image 23.jpg

CSS3 背景渐变效果

CSS3中线性渐变属性到目前为止仅在Safari 4和Chrome和Firefox 3.6中受支持。

<div style="width:200px;height:100px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "></div>

Salin selepas log masuk

Image 24.jpg

CSS3 颜色效果

现在具有不透明度

rgb在CSS中是用来设置元素的颜色的但在CSS3中新增了一个可以设置颜色不透明度的操作，rgb已转换为rgba，这简化了控制元素不透明度的方式。

<div style="width:50px;height:50px;background-color:rgba(123,123,123,0.4);"></div>

Salin selepas log masuk

CSS3转换（元素旋转）

CSS3新引入了transform属性用以旋转元素

<div style="width:50px;height:50px;background-color: pink;-webkit-transform:rotate(40deg); ">旋转</div>

Salin selepas log masuk

CSS3多列布局

在网页布局上每个网页都需要被分为列，并加以调整使其适合不同的浏览器，CSS3中使用的多列布局属性只需要指定所需列数然后创建它们

column-count 属性规定元素应该被分隔的列数

div.content{
width:210px;
border:1px solid #ccc;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:25px;/*列之间的间隔*/
-webkit-column-rule:1px solid #ccc;/*规定列之间的宽度、样式和颜色规则*/
}
</style>
</head>
 <body>
  <div class="content">
	php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
  </div>

Salin selepas log masuk

CSS3 Web字体

CSS3还可以在网页上嵌入任何自定义字体，原本字体依赖于客户端系统，网页只能呈现浏览器或客户端计算机支持的字体，但是通过使用@font-face属性，您可以使用其他位置上的字体

@font-face
{
font-family: myFirstFont;
src: url(Sansation-Italic.ttf)
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>WWWWWW</div>

Salin selepas log masuk

Image 26.jpg

总结：以上就是本篇文章的全部内容了，希望对大家了解CSS3的新属性有一定的帮助。

Atas ialah kandungan terperinci CSS3新增了哪些属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

CSS3新增了哪些属性