本文介绍了CSS 曲线阴影实现的示例代码,分享给大家,具体如下: 通过对比可以看书“曲线阴影”比“普通阴影”的效果会更加生动。 原理:通过伪元素做出第二层阴影效果。 注意:伪元素的尺寸要比父元素小一...
现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 background-position 进行定位;但是由于计算机...
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉。用普通写法border:solid 0.5px red;iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框状态. 原...
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖。但是在微信小程序里使用的时候,下面一直飘红线,再仔细查了一下,原来是在 Chrome, Saf...
说下两种css 制作正六边形的方法。 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别是:before部分,div部分,...
本文介绍了CSS 类选择符和ID选择符的区别,分享给大家,具体如下: 类选择符 HTML代码: <div class="one"></div> <div></div> ...
本文介绍了CSS中的 object-fit 与 object-position的使用,分享给大家,具体如下: 说明 问题: 一个div宽度不固定,高度固定,采用Flex布局,它里面有两个元素一个img宽度占40%,高度占100%,一个p元素,宽度占...
最近整理了CSS导航栏及弹窗,具体如下: CSS导航 先来看下效果: <!doctype html> <html> <head> <title>Insert...
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 【语义布局】...
前言 其实前端那些事蛮有意思的,HTML实现的是静态的,使用ajax之后就可以和数据库交互了,加上js和jQuery之后就动起来了,加上CSS之后就更加炫酷了。因为项目中需要,查资料和编写了一些炫酷的二级菜单,分享给大家,好东西就要分享嘛! 一、滑动菜单 ...
最近在学习字体时遇到字体大小的设置,font-size单位可以是px或em或rem,那么这几种单位都有什么区别呢,该如何使用呢? px是像素图像的基本采样单位,相对于显示器屏幕分辨率而已的,什么是一个像素呢,你把一张图一直放大,会看到一个个小的方格子,一个方...
前言 本文主要给大家介绍的是css中text-overflow属性与文本截断的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: text-overflow与文本截断 CSSer对text-overflow肯定是非常熟悉的,并且,对于单行文本的截断...
本文主要介绍的是关于CSS文字修饰的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、text-decoration 相信大家对于text-decoration这个属性并不陌生,在重置a标签的默认样式时,我们经常要这样写:text-deco...
CSS(Cascade Style Sheet),即层级样式表。 HTML可以说只是给网页填充了内容,CSS则是对网页进行化妆、修饰,比如给文字设置字体、颜色、大小等。 以前在HTML标签中能够通过设置属性的...
CSS ID 选择器 在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。 语法 首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID ...
页面布局方式 页面布局方式,主要包含:文档流、浮动层、float属性。 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元...
说明 Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。 主要的值 ①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),...
先来看一下效果图: 简单粗暴上代码: html: <div class="dialog-box"> <span class="bot"></span> ...
CSS repeating-linear-gradient 方法 创造一个可重复的渐变。它接受和普通线性渐变相同的属性值并且表现也一致。 但它会自动在延伸的方向上重复 color stops。每段起始和结束的 color ...
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置,实质上是在底层加了一个div,给这个div设置模糊了。...