css

text-stroke实现的文字外描边效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Cecilio 发布于 7个月前 368

利用CSS的Grid布局实现不同宽度屏幕下的自适应布局

<div class="wrapper"> <div class="box b1">1</div> <div class="box b2">2</div> <di...
一大碗 发布于 11个月前 292
css

利用CSS的Grid布局实现自适应的九宫格

html: <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <di...
一大碗 发布于 11个月前 668 1
css

在Chrome中设计box-shadow阴影效果

在Chrome的开发工具中,选择元素后,在Sytles面板中,鼠标移到下图中的三个点区域。 然后点击box-shadow图标,如下图: 这样就可以通过图形化的工具来调整box-shadow了: 如果要编辑已有的box-shadow样式...
一大碗 发布于 1年前 207

手机页面里禁止长按屏幕出菜单

在手机网页里,如果长按屏幕的话,会出来菜单,如果想长按不出现菜单的话,在长按元素(按钮、图片)上加上以下css代码 .btn { .... .... -webkit-touch-callout: none; ...
xtigerj 发布于 1年前 231 2
css

font boosting

在一个手机端页面,定义了字体大小,但显示的大小与在CSS中指定的大小不一致 .element { max-height: 999999px; } 这是chrome浏览器的问题。 这个方法对我的问题有效,如果没用请自行搜索标题。...
wuwj001 发布于 1年前 226

去除android或者iOS浏览器控件系统默认样式

a,button,input,textarea,select{ -webkit-appearance:none; -webkit-tap-highlight-color: rgba(0,0,0,0;); appearance:n...
lblis 发布于 1年前 210

css3 文章的多列布局

.column{ width: 400px; padding: 10px; column-count: 3; column-gap: 40px; column-rule-width: 1px; ...
lblis 发布于 1年前 178

checkbox 的选中状态样式

主要是checked 伪类的使用 input[type="checkbox"]:checked:after{ content: " "; height: 20px; width: 50px; display: block; ...
lblis 发布于 1年前 209

a标签嵌套img,高度不正确的解决方法

这是一个常见的问题,当a标签嵌套img时,a标签的高度是奇怪的16px,而不是预料的img的高. html结构: <a href="#"> <img src="xxx.jpg"> &l...
Cecilio 发布于 1年前 169
css

flex布局容器从下到上排列

ul{ display: flex; flex-direction:column-reverse; //从下到上排列 } li{ width: 50px; he...
lblis 发布于 1年前 182

CSS 多列等宽布局

1,display: flex 方法 html,body{ height: 100%; padding: 0; margin: 0; } .wrapper{ box-sizing: border-box;...
lblis 发布于 1年前 232

flex布局左右布局

html,body{ height: 100%; //使body 高度100% padding: 0; margin: 0; } .wrapper{ height: 100%; border:1p...
lblis 发布于 1年前 299

CSS3 Transform 引起的 z-index "失效"

引起失效的transform: .outer-box { position: absolute; width: 300vh; height: 100vm; transform: rotate(90deg); transf...
wuwj001 发布于 1年前 232

web移动端浮层滚动阻止window窗体滚动JS/CSS处理

//首先CSS层面,在 <html> 标签上增加一个类名,例如 noscroll ,然后配合如下CSS和JS代码: .noscroll, .noscroll body { overflow: hidden; } .no...
子非鱼 发布于 1年前 210

用 currentColor 管理css中的颜色

currentColor 等于当前文字的颜色,可以用于背景,边框,文字,阴影,渐变等等,可以减少重复颜色的代码量 li{ width: 200px; padding: 10px; margin: 20px; ...
lblis 发布于 1年前 159

CSS 实现一个正圆形

.avatar { border-radius: 50%; } 设置边框圆角弧度为50%即可,非常方便。...
harry 发布于 1年前 153 2
css

移动端取消touch高亮效果

.xxx { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }...
子非鱼 发布于 1年前 144
css

select样式设置

select:focus::-ms-value { background: none; }//修改选中背景 select::-ms-value{ background: none; }//不选中背景 select::-ms-e...
子非鱼 发布于 1年前 176

css3 新增选择器

empty 选择空的元素,里面没有任何内容,包括空格。 root 选择文档的根元素,在HTML文档中,根元素始终是html元素。 :not 否定选择器,可以选择除某个元素之外的所有元素。 :root{ background: #f...
lblis 发布于 1年前 165

css 垂直居中

margin: auto; .box{ width: 400px; height: 400px; position: relative; border: 1px solid #999; backg...
lblis 发布于 1年前 205