Web前端开发开发设计者必知的9个好用CSS特性

日期:2020-12-14 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

1. 圆角实际效果

现如今的Web设计方案在持续跟进全新的开发设计技术性,竞相选用HTML5来开发设计多样性的Web运用。HTML5的优点之1,便是以前务必用照片完成的元素,如今能够用编码来完成。“border-radius”是完成这1作用的1个关键的特性,能够用来立即界定HTML元素的圆角,而且被全部当代访问器适用。

Css编码

拷贝编码
编码以下:

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

想充足掌握IE访问器对CSS3特性适用状况,请看 这篇文章内容 。

2. 黑影实际效果

根据CSS3的box-shadow特性能够十分便捷地完成黑影实际效果。全部流行的访问器都适用这个特性,在其中Safari访问器适用加前缀的-webkit-box-shadow特性。

Css编码

拷贝编码
编码以下:

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

还可以用JavaScript来完成黑影实际效果,以下:

Css编码

拷贝编码
编码以下:

object.style.boxShadow=”20px 10px 7px #ccc”

3. @media特性

Media特性用于设定同1款式表在不一样显示屏下的款式,能够在特性值中特定运用此款式的物质或新闻媒体。

Css编码

拷贝编码
编码以下:

@media screen and (max-width: 480px){
/* 网页页面在宽度为480px显示屏上的显示信息款式 */
}

开发设计者还可以应用@media print特性特定复印预览的款式:

Css编码

拷贝编码
编码以下:

@media print
{
p.content { color: #ccc }
}

4. 渐变色填充

CSS3的Gradient(渐变色)特性给了开发设计者另外一个惊人的体验。Gradient还未获得所有访问器的适用,因此不可以彻底依靠Gradient来设定合理布局。

Css编码

拷贝编码
编码以下:

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5. Background size

Background size是CSS3中最关键的特性之1,早已被许多访问器适用。Background size特性用于设定情况图象的尺寸。之前情况图象的尺寸在款式中是不能调控的,现如今应用Background size特性的1行编码就可以完成客户要想的情况图象实际效果。

Css编码

拷贝编码
编码以下:

div
{background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6 @font face

CSS3中的@font face特性对引入字体样式文档做了很大的改善,该特性关键用于把自定的Web字体样式嵌入到网页页面中。之前因为字体样式批准的难题,设计方案者只能应用特殊的字体样式。最先自定字体样式的名字:

Css编码

拷贝编码
编码以下:

@font-face
{
font-family: mySmashingFont;
src: url(‘blitz.ttf’)
,url(‘blitz.eot’); /* IE9 */
}

随后便可以在任何地区应用mySmashingFont字体样式系列:

Css编码

拷贝编码
编码以下:

div
{
font-family:mySmashingFont;
}

7. clearfix特性

假如设计方案师觉得Overflow: hidden不可以很好的解决波动,那末clearfix出示了更好的解决波动的处理计划方案。

Css编码

拷贝编码
编码以下:

.clearfix {
display: inline-block;
}

Css编码

拷贝编码
编码以下:

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

8. Margin: 0 auto

Margin: 0 auto特性是CSS的基本特性。尽管CSS英语的语法并沒有界定1个块元素垂直居中的句子,但设计方案师依然可使用auto margin选项来完成这个作用。这个特性能够依据必须垂直居中1个元素。但要留意,必须设计方案者给div设置宽度才会完成。

Css编码

拷贝编码
编码以下:

.myDiv {
margin: 0 auto;
width:600px;
}

9. Overflow: hidden

Overflow:Hidden这个CSS特性除掩藏外溢作用外,也有消除波动的功效。

Css编码

拷贝编码
编码以下:

div
{
overflow:hidden;
}