checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。本文主要给大家分享CSS+HTML自定义checkbox效果，一起看看吧，希望能帮助到大家。实现思路纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，...
鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，本文主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下，希望能帮助到大家。接下来就是要使用css实现鼠标上移图标旋转效果。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p,img,body{ margin: 0; padding: 0; } .box{ height: 150px; width:300px; background: #1b7b80; margin: 0 au...
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。本文主要介绍了CSS 学习笔记之CSS Selector的相关资料,需要的朋友可以参考下，希望能帮助到大家。CSS1 中定义的选择器类型选择器用于选择指定类型的元素（其实他就是 html 标签选择器），常见用法如下：body {/*对 body 元素定义样式*/ }body,p {/*同时选择多种标签元素*/ }ID 选择器用于选...
最近发现了一个非常强大的CSS3属性，就是filter(滤镜)属性，喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然，这个属性的效果肯定不能跟ps相比，但是利用的好的话可以在节约很多空间下，把一张图做成两张图的效果。本文主要介绍了详解CSS3中强大的filter(滤镜)属性的相关资料,需要的朋友可以参考下，希望能帮助到大家。1、定义 filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例...
圆角，大家一定都会做，border-radius, 内凹圆角如何实现？本文主要介绍了CSS3实现内凹圆角的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望帮助到大家。可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部...
本文主要介绍了关于CSS中渐变的相关资料，主要分享CSS3中linear-gradient和radial-gradient的知识，带给大家使用渐变的另一个角度，文中通过示例代码介绍的非常详细，需要的朋友可以参考下，希望能帮助到大家。一、线性渐变这里需要大家先去看一下基本语法，再看接下来的例子。 linear-gradient(90deg,red 20%,blue 50%,yellow 80%);很显然通过这张图，你会大概的明白设置这些参数的作用。虽然我并没有用什么文字去解释它。（所...
本文主要介绍了css3学习系列之移动属性详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。transform功能放缩使用sacle方法实现文字或图像的放缩处理，在参数中指定缩放倍率，比如sacle(0.5)表示缩小50%，例子如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>scale方法使用示例</title><style>p {width: 300px;margin: 150px auto;background-colo...
本文主要讲解CSS如何制作中英文双语菜单，这是一款你一定喜欢的CSS中英文双语菜单，支持鼠标 特效，先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的中英文CSS菜单</title> <style> body{ margin:0; ...
项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。本文主要介绍了CSS3 实现弹幕的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1.首先创建弹幕区域<p class="barrage"> <p class="mask"> <!--//弹幕内容--> </p> </...
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。本文我们和大家分享CSS段落属性详解。利用CSS还可以控制段落的属性，主要包括单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进和行高等。1.1 单词间隔 word-spacing语法：word-spacing：取值说明： 取...
1.opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响<pclass="p1"> snda:opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响 </p> <p>ppskdkad</p>.p1{ opacity:0; width:200px; height:200px; border:1pxsolidred; } 2.visibility:hidden还是只是把元素隐藏了，但是还是占有布局<pclass="p2"> 这是第二个p visibility:hidden还是只是把元素隐藏了，但是还是占有布局 </p> <p>看看效...
最近在学习CSS优先级计算的规则这个地方知识点挺多的，而且很重要，本文主要介绍了CSS优先级计算的规则,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。CSS的权重一、CSS的引入方式 1.在节点元素上，使用style属性 2.通过link引入外部文件 3.通过style标签在页面内引入三种引入方式的区别index.html文件 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><tit...
在前端开发中，css是我们必定会使用到的语言，本文我们主要和大家一起学习 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.content 属性的基本语法.content 属性的表现形式就如下所写,这里列出了每一个属性的值.p::before {content: normal|counter|attr|string|open-quote|url|initial|inherit; }这个与CSS中的稍有不同,例如在::be...
本文主要介绍关于readonly、disabled、display、visible之间的区别详解。css样式设置中有几个功能相同但表现形式却略有差异的属性，今天在通过js更改对象的样式属性的时候就发现display和visible这两个貌似相同，其实还是有些区别的，这里顺便也把看到的readonly和disabled的区别也分享一下。display和visible的区别：（1）首先说明的是display:none和visible:hidden都能够实现将网页上某个元素隐藏起来。（2）如果在样式文件或页面...
js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度1、打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方2、点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项3、这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题c...