c__dreamer的博客

一个充满梦想的世界

margin的特性及Bug分析

margin是盒子模型中的外边距,在很多地方都会用到这个属性。对于margin相关的东西做了一些总结 目录 特性总结 margin的auto值的应用 margin的Bug分析 特性总结 1.不属于盒子的组成部分,不会影响盒子的尺寸设置。 2.在元素周围生成额外的空白区,这个空白区永远...

2018-09-07 17:20:47

阅读数 126

评论数 0

padding的特性及百分比值详解

padding是盒子模型内部的组成部分,它的设置会影响盒子尺寸。 有一下注意点。 1.不同盒模型下的特点     标准盒模型设定下,影响盒子自身尺寸。     怪异盒模型设定下,影响盒子内容区域尺寸 2.行间元素的padding垂直部分的占用空间会受到line-height的限制 (有效...

2018-09-03 11:14:21

阅读数 542

评论数 0

宽与高的特性总结

css中的width和height用于设置元素的宽度和高度。 1.不同盒模型下的宽高设置     标准盒子设定下:设置的是元素的内容区域宽高。     怪异盒子设定下:设置的是元素的整体区域宽高。 2.值可以是数值 3.对inline(行级)元素无效 4.支持min和max前缀   ...

2018-09-03 10:56:49

阅读数 63

评论数 0

clip的text值设置文字遮罩效果

在background-clip中有一个属性值是text。用于让裁剪区域限制于容器中的文本内。可以让背景图呈现在文本区域内,实现用图像填充文本的神奇效果。 有一下几点需要注意:     1.需要配合webkit的另一个私有属性: -webkit-text-fill-color: 来实现。  ...

2018-09-03 10:42:35

阅读数 131

评论数 0

漫谈background各种属性的特性

在CSS3样式中background中可以划分多个属性进行设置。 目录 background-image background-attachment background-origin background-color background-repeat background-pos...

2018-09-03 10:28:13

阅读数 206

评论数 0

实现背景半透明的方法及兼容解决方案

        现在的CSS3有很多种实现半透明的方法,如:                CSS3新增的rgba()或者hsla()色彩值实现。                CSS的opacity属性也可以实现                针对老板本IE浏览器可以通过alpha实现(这个等下...

2018-05-27 17:36:26

阅读数 232

评论数 0

CSS3色彩关键字currentcolor优化

        currentcolor是CSS3新增的一个可以说是变量的一个值        currentcolor                CSS3新增的色彩关键词,代表“当前的color色彩”。                可以看作为一个变量,能够接受color值定义的地方都可以使...

2018-05-27 17:19:25

阅读数 247

评论数 0

了解transparent,用transparent透明实现箭头绘制

        transparent:指定透明度(版本更新:background属性->border属性->任何带有color的属性)        transparent                用来指定全透明色彩,想当于rgba(0,0,0,...

2018-05-27 17:05:09

阅读数 572

评论数 0

定义色彩的6中方法

        随着前端体系的发展,CSS定义色彩的方法同样出现的很多,找到更便于自己的,适合在团队开发中使用的        CSS发展到CSS3至今有六种色彩模式色彩关键字        预定义的颜色名称(red,green,等等)十六进制#RRGGBBRGBrgb(red,green,blu...

2018-05-27 15:47:39

阅读数 203

评论数 0

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震...

2018-02-02 00:16:51

阅读数 57

评论数 0

css实例 文字阴影

text-shadow: h-shadow v-shadow blur color; h-shadow:必需。水平阴影的位置。允许负值。 v-shadow:必需。垂直阴影的位置。允许负值。 blur :可选。模糊的距离。 color :可选。阴影的颜色 JavaScript语法:...

2017-11-22 16:46:36

阅读数 242

评论数 0

提示
确定要删除当前文章?
取消 删除