css教程

  • CSS自定义变量方法

    今天找模板看到一个模板这段代码,很好奇,研究了下,分享给大家学习。:root { --blue: #0e0620; --white: #fff; --green: #2ccf6d;}body { color: var(--blue);}这段是CSS3的自定义变量的写法,搞了前端这么多年,还没遇到过,以前只知道LESS SASS支持变量...

    9个月前
  • @media自适应不同分辨率

    @media自适应不同分辨率

    @media是CSS中媒介语法,可以根据不同分辨率,执行不同的CSS样式,可以达到自适应不同分辨率终端的方法。下面精准像素分享一套自用的@media方法,已经应用了很多套模板,100%好用。@media使用方法在使用@m...

    3810个月前
  • CSS3+JS页面loading过度跳转效果

    CSS3+JS页面loading过度跳转效果

    CSS3+JS页面loading过度跳转效果,字母跳动效果,具体效果如下图CSS3+JS页面loading过度跳转效果代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF...

    8910个月前
  • css3背景渐变语法

    css3背景渐变语法background: linear-gradient(0deg, #fff 0%,#000 100%);语义说明background:背景linear-gradient:渐变0deg:渐变方向,比如从左到右,从右到左,从上到下等等#fff:渐变起始颜色#000:渐变结束颜色0%,100%:透明度...

    10个月前
  • CSS中的语法缩写简写方法大全

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。下面介绍常见的CSS简写规则:margin简写这里主要用于两个属性:margin和padding,我们以margin为例,pa...

    2011个月前
  • 3段h1标题CSS美化代码

    3段h1标题CSS美化代码

    一段简单的CSS美化h1,h2,h3,h4,h5,h6代码,很简单css美化功能。使用的是比较简单的css样式美化的h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208,...

    4711个月前
  • 浏览器常见的css兼容性问题

    浏览器有着大量不同的版本,不同种类的浏览器的内核也不尽相同,所以不同浏览器对代码的解析会存在差异,这就导致对页面渲染效果不统一的问题。初始化样式因浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,如果不初始化会造成不同浏览器之间的显示差...

    4311个月前
  • CSS如何修改元素轮廓虚边

    我们在表单输入时,会看到鼠标点击input元素会出现一条蓝色轮廓虚边,如下图。搭配自己的样式不是非常美观,精准像素教大家如何修改她。这里需要用到CSS的outline。outline语义轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作...

    271年前
  • CSS盒子 margin外边距padding内边距border边框

    以前应聘前端工作的时候,考官总喜欢问CSS盒子是什么?其实就是margin外边距和padding内边距,外加一个border边框,换了个神奇的叫法。margin外边距外边距的意思就是,元素向外的距离。代码示例margin:10px;文字代表元素本身,黄色代表外边距。padding内边距内...

    1年前
  • CSS width控制元素宽度

    width是CSS中用来控制元素宽度的,其实控制宽度不止只有width,还有其他的语法。width语义元素宽度,所有浏览器都兼容。width代码示例width:100px;宽度100像素max-width:100px;宽度最大100像素min-width:100px;宽度最小100像素...

    1年前