CSS
关注
分享
扫一扫
css3
_格鲁特宝宝
这个作者很懒，什么都没留下…
展开
-
CSS 设置背景色指定高度
CSS 设置背景色指定高度，我们通过 ::before 或者 ::after伪类来实现。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>css 设置指定高度背景色</title> <style type="text/css">p { display: inline-block; positio原创 2021-11-29 17:17:09 · 4354 阅读 · 0 评论 -
火狐浏览器滚动条兼容问题
在日常开发中，我们经常会用到 overflow: scroll;但浏览器自带的默认滚动条很难看，因此我们会需要美化它方法一：自定义美化谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种）.scrollbar { overflow: auto; float: left; border: none;}.scrollbar::-w...原创 2020-02-20 09:57:27 · 5988 阅读 · 0 评论 -
CSS justify-content 属性
浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 Chrome Internet Explorer / Edge Firefox Safari Opera justify-content 29.0 21.0 -webkit- 1...原创 2018-12-25 15:18:28 · 727 阅读 · 0 评论 -
CSS 给图片或背景图片加颜色遮罩
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：第一种，代码如下：css:.wrap{ position: relative; background: url(i/pic4.jpg) no-r...原创 2019-01-18 10:48:58 · 24271 阅读 · 0 评论 -
CSS 自定义css样式汇总
/* 自定义查询按钮样式 */.query { width: 0.4rem; height: 0.22rem; line-height: 0.22rem; border: 1px solid #C6C6C6; outline: 0; cursor: pointer;}/* 不写 :active 状态，没有类似点击弹起效果 */.query:...原创 2019-02-21 16:53:51 · 704 阅读 · 0 评论 -
CSS radial-gradient() 函数 - 用径向渐变创建图像
radial-gradient()radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义，为了创建径向渐变你必须设置两个终止色。定义与用法radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。径向渐变实例支持版本：CSS3浏览器支持表格中的数字表示支持...原创 2019-04-10 14:33:03 · 1056 阅读 · 0 评论 -
CSS linear-gradient() 函数 - 用线性渐变创建图像
linear-gradient()linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果；还要定义终止色。定义与用法linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定...原创 2019-04-10 14:43:57 · 888 阅读 · 0 评论 -
CSS3 边框渐变背景色border-image: linear-gradient()
写法 border-image: gradient top right bottom left; 第一个参数是带有浏览器内核的元素背景渐变写法，如：-webkit-linear-gradient() 第二至第五个参数写法与边框宽度（border-width）的写法是一致的实例/* 如下图.border-image1 */.border-im...原创 2019-04-01 17:38:12 · 8774 阅读 · 0 评论 -
CSS 不使用 border-image 实现边框渐变及圆角
CSS 中 border 用了border-image，border-radius圆角设置就会失效，所以可以通过伪元素::before或者::after，使用背景线性渐变模拟实现。.border-radius-linear-gradient { width: 200px; height: 200px; position: relative; border: 4...原创 2019-04-01 17:51:28 · 4365 阅读 · 0 评论 -
CSS3 自定义 loader 加载
<div class="myloader"> <div class="loader"> <div class="dot dot1"></div> <div class="dot dot2"></div> <div class="dot dot3"></...原创 2019-04-16 14:31:18 · 276 阅读 · 0 评论 -
CSS object-fit 属性
object-fitCSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。实践：https://interactive-examples.mdn.mozilla.net/pages/css/object-fit.html语法object-fit 属性由下列的值...原创 2019-04-16 16:53:23 · 287 阅读 · 0 评论 -
CSS3 greyscale 实现元素转换成黑白色（灰色、置灰）
CSS3 greyscale 滤镜实现-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray; /* IE */...原创 2019-04-29 14:06:14 · 2214 阅读 · 0 评论 -
CSS3 实现元素翻转（不是旋转）
有时候我们要实现元素的垂直或者水平翻转，尤其是图片的翻转，两张对称的图片，可以用两张图片来解决这个问题，那么其他的元素呢？而且存两张图片并不是上上策，如何用代码实现呢？ CSS3提供了transform属性，实现方法如下：水平翻转：transform: scale(-1,1);垂直翻转：transform: scale(1,-1);那么问题来了，transform:sca...原创 2018-12-24 11:34:07 · 1160 阅读 · 0 评论 -
CSS radial-gradient()
语法：<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)<position&am原创 2018-12-03 15:57:00 · 689 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时，容器会出现滚动条，其浏览器自带的滚动条无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色滚动条的css样式主要有三部分组成：1，::-webkit-scrollbar 定义了滚动条整体...原创 2018-08-20 17:39:19 · 505 阅读 · 0 评论 -
CSS 溢出文本省略（text-overflow）
在CSS3中，text-overflow属性的基本语法如下：clip：表示不显示省略文本，简单的裁切。 ellipsis：表示对象文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。 ellipsis-word：表示当对象文本溢出时显示省略标记，省略标记插入的位置是最后一个词（word）。实际上，text-overflow属性仅用于决定当文本溢出时是否显示省略标记，并不具备样式定义...原创 2018-08-28 17:34:18 · 415 阅读 · 0 评论 -
CSS 设置table中tbody的自定义滚动条
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS教程</title> <style> /* 自定原创 2018-08-28 17:47:05 · 1174 阅读 · 0 评论 -
CSS calc() 函数
CSS 语法calc() = calc(四则运算)定义与用法calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；支持版本：CS...原创 2018-08-28 18:04:48 · 839 阅读 · 0 评论 -
CSS 自动换行、强制不换行、强制断行、超出显示省略号＜GrootBaby＞
word-wrap: break-word; /* 如果单词超过宽度了，整个单词打散，超过的部分换行 */white-space: normal; /* 重点是这个属性 */word-break: break-all; /* 允许数字或英文单词内换行 */white-space: nowrap; /* 禁止换行 */overflow: hidden; /* 隐藏X,Y滚动条 ......原创 2018-08-31 15:52:32 · 631 阅读 · 0 评论 -
CSS 设置table中tr的行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定...原创 2018-08-21 16:35:21 · 5862 阅读 · 0 评论 -
CSS 页面居中显示问题
/* 页面顶部居中显示 */.head { position: absolute; top: 0; left: 0; right: 0; bottom: auto; margin: auto;}/* 页面底部居中显示 */.foot { position: absolute; top: auto; left: 0...原创 2018-11-13 10:16:38 · 947 阅读 · 0 评论 -
CSS画基本图形
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS 画基本图形</title><style type="text/css">* { color: #ff原创 2018-11-15 17:12:23 · 185 阅读 · 0 评论 -
CSS3 实现内外阴影效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box-shadow</title> <style type="text/css"> .box{原创 2018-11-21 18:58:07 · 546 阅读 · 0 评论 -
CSS 选择器＜GrootBaby＞
CSS3 选择器http://www.w3school.com.cn/cssref/css_selectors.asp在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器 例子 例子描述 CSS .class .intro 选择 clas...原创 2018-11-20 10:35:31 · 251 阅读 · 0 评论 -
jQuery 获取与设置div的宽高
jQuery获取与设置div的宽高的方法有两种：1. 使用尺寸函数2. 使用css方法 获取宽高1. 尺寸函数： height() 获取高度，width() 获取宽度2. css获取div宽高： css("height")获取高度，css("width")获取宽度区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串$(".divClass"...原创 2018-11-23 15:44:54 · 607 阅读 · 0 评论 -
CSS3 实现border边框渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>border</title> <style type="text/css"> .box{ widt原创 2018-08-22 09:45:01 · 5055 阅读 · 0 评论