旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS3新增了哪些属性【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:85


导读:本日将和人人引见CSS3中的新增属性,具有肯定的参考价值,愿望对人人有所协助最新版本的CSS3的涌现使Web设想更轻易,虽然并不是一切浏览器都支撑它。然则因为技术上的敏捷变...
本日将和人人引见CSS3中的新增属性,具有肯定的参考价值,愿望对人人有所协助

最新版本的CSS3的涌现使Web设想更轻易,虽然并不是一切浏览器都支撑它。然则因为技术上的敏捷变化,CSS3的模块化的规范化使如今一切浏览器都在实行完全的CSS3支撑,置信不久以后CSS3以及HTML5 将成为收集的将来,接下来将在文章中和人人细致引见CSS3中的新功能

浏览器兼容问题:

Firefox 须要前缀 -moz-。

Chrome 和 Safari 须要前缀 -webkit-。

【引荐课程:CSS3教程

CSS3笔墨暗影

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

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>

CSS3 色彩结果

如今具有不透明度

rgb在CSS中是用来设置元素的色彩的但在CSS3中新增了一个能够设置色彩不透明度的操纵,rgb已转换为rgba,这简化了掌握元素不透明度的体式格局。

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

CSS3转换(元素扭转)

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

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

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">
	ki4网供应大批免费、原创、高清的php视频教程,并按期举办公益php培训!可边进修边在线修正示例代码,检察实行结果!php从入门到通晓,一站式php自学平台!
  </div>

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>

总结:以上就是本篇文章的全部内容了,愿望对人人相识CSS3的新属性有肯定的协助。

以上就是CSS3新增了哪些属性的细致内容,更多请关注ki4网别的相干文章!

标签:CSS3