9个必知的CSS属性

时间: 2020-02-04阅读: 123标签: 属性

1.圆角效果

如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用。HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现。“border-radius”是实现这一功能的一个重要的属性,可以用来直接定义HTML元素的圆角,并且被所有现代浏览器支持。

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


2.阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。所有主流的浏览器都支持这个属性,其中Safari浏览器支持加前缀的-webkit-box-shadow属性。

#myDiv{
       -moz-box-shadow:20px10px7px#ccc;
       -webkit-box-shadow:20px10px7px#ccc;
       box-shadow:20px10px7px#ccc;
}

也可以用JavaScript来实现阴影效果,如下:

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


3.@media属性

Media属性用于设置同一样式表在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。

@mediascreenand (max-width: 480px) {
/* 网页在宽度为480px屏幕上的显示样式 */
}

开发者也可以使用@media print属性指定打印预览的样式:

@mediaprint{
       p.content{
              color:#ccc
       }
}


4.渐变填充

CSS3的Gradient(渐变)属性给了开发者另一个惊人的体验。Gradient还未得到全部浏览器的支持,所以不能完全依赖Gradient来设置布局。

background:-webkit-gradient(linear,lefttop,leftbottom,from(darkGray),to(#7A7A7A));  


5.Background size

Background size是CSS3中最重要的属性之一,已经被很多浏览器支持。Background size属性用于设置背景图像的大小。以前背景图像的大小在样式中是不可调控的,如今使用Background size属性的一行代码就能实现用户想要的背景图像效果。

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


6.@font face

CSS3中的@font face属性对引用字体文件做了很大的改进,该属性主要用于把自定义的Web字体嵌入到网页中。以前由于字体许可的问题,设计者只能使用特定的字体。

首先自定义字体的名称:

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

然后就可以在任何地方使用mySmashingFont字体系列:

div{
       font-family:mySmashingFont;
}


7.clearfix属性

如果设计师认为Overflow: hidden不能很好的处理浮动,那么clearfix提供了更好的处理浮动的解决方案。

.clearfix{
       display:inline-block;
}

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


8.Margin: 0 auto

Margin: 0 auto属性是CSS的基础属性。虽然CSS语法并没有定义一个块元素居中的语句,但设计师仍然可以使用auto margin选项来实现这个功能。这个属性可以根据需要居中一个元素。但要注意,需要设计者给div设定宽度才会实现。

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


9.Overflow: hidden

Overflow:Hidden这个CSS属性除了隐藏溢出功能外,还有清除浮动的作用。

div{
       overflow:hidden;
}

 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7391

css calc()有啥用?

CSS3的calc() 函数用于动态计算长度值。calc()函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

HTML的poster属性怎么用?

HTML的poster属性主要应用在<video>元素中,用于在视频下载或用户单击播放按钮时显示图像;如果未设置此图像,则会将第一帧视频作为海报图像。

HTML5中的lang属性,zh-CN还是zh-Hans?

language:主语言,用代码“zh”表示汉语,小写。好像对于大小写没有强制要求,习惯而已。还是遵循习惯吧,总让别人看着别扭不是彰显个性的好办法

Vue 计算属性简析

Vue 开发人员必然使用过计算属性(Computed Properties):你可以像绑定 data 属性一样在模板中绑定计算属性;计算属性一般依赖一个或多个 data 属性,并返回它们复杂逻辑下的状态

html数据属性 data-*

在HTML标签中定义属性,需要时可以读取属性的值,这类属性称为数据属性;在JavaScript中读取时通过元素的dataset.<属性名称>访问,这样触发函数就能读取data-text的值

css3新增属性有哪些?

css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性。

Vue之计算属性和侦听器

在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当你想要在模板中多次引用相同表达式时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性

Vue.js 计算属性

在html模版中绑定数据时,如果需要的数据不是一个简单的数据,而是需要将一个或者多个数据计算之后得到的数据,这时候就需要用到计算属性;使用方法:配置computed属性,它的值为对象

vue中计算属性的get与set方法

在vue的计算属性中,所定义的都是属性,可以直接调用,正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法

CSS3的all属性

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。为什么会有这个CSS属性呢?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全