css3修改浏览器scroll默认样式

原生的滚动条又宽又长, 特别的丑, 其实我们可以自己定义滚动条的:定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; }定义滚动条轨道 内阴影+圆角::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-co

纯css画各种图形,基本矩形、多边形,爱心、钻石、阴阳八卦等

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是 firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的。原文:http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html1、正方形最终效果:CSS代码如下:#square { width: 100

CSS中的focus-within伪类选择器

css中:focus-within是什么在CSS中 :focus-within 是一个伪类,现在已经被列入到CSS选择器中(CSS Level 4 selector)。CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。没看懂,可以看下面的例子:<div class="container" tabindex="0"> <label for="text">Enter text</label> <input id="text" type="text" /

CSS 技术技巧_提高你CSS技术的法则

1.不要让你的代码脱离你的掌控,尽量简洁别让你的代码脱离你的掌控这是编程的一种通用建议,不仅仅适合css. 当你开始写代码的时候,先思考,思考以下几个问题:我怎样实现?有其他方法实现么?怎样优化(简洁,可维护,等等)?急于编码会浪费时间,你有可能花了一个小时也没实现,不得不从头再来,这不应该发生。如果你花了好几个小时写一个css幻灯片,最终没办法用了个js幻灯片插件或者别的,这是很蛋疼的,并不是说你没成功,而是无谓的浪费了很多时间。如果项目有deadline的话,你就要悲剧了。保持他的简单性Css很简单,但如果你想,同样可以变得很复杂。在很多场景里,最简单的即是最好的。当你要实现什么效果的时候

CSS隐藏元素的五种方法

用css隐藏页面元素有许多种方法。1、opacity:02、visibility:hidden3、diaplay:none4、position:absolute5、clip-pathopacity     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。visibility     第二个要说的属性是visibility。将它的值设为hidden将隐

初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。在“纯粹的”CSS支持变量之前,我们有像Less和Sass这样的预处理器。但是它们需要在使用前进行编译,因此(有时)会增加额外的复杂性。 如何定义和使用CSS变量从我们最熟悉的语言JavaScript开始:在JavaScript中定义变量使用vars。要声明一个简单的JavaScript var,如下内容:var mainColor = 'red'; 要声明一个CSS变

分享几个CSS技巧

创建剪切动画对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低。.animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); } }clip-path也能用来进行其他规则/不规则图形的剪切.clip { clip-p

web前端的一些不为人知的冷知识点_CSS篇整理

关于CSS的恶作剧相信你看完以下代码后能够预料到会出现什么效果。*{ cursor: none!important; }简单的文字模糊效果以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!p { color: transparent; text-shadow: #111 0 0 5px; } 垂直居中有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。当然你可以将容器设置为display:table,然后将子元素也

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

需求如下:    前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?mate标签:<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />css代码:<style type="text/css"> .figure-l

纯css如何绘制三角形_利用border实现画三角

使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。首先生成一个带边框宽高为0的div:<style> .dom{ width: 0px; height: 0px; border-width: 50px; border-style: solid; border-color: red green blue brown; } </style> <!--宽度为100px--> <div class="dom"></div>效果如下:取消其它三边的颜色形成三角形:这