CSS + CSS3
Rkatsiteli
一个人的快乐,不是因为他拥有的多,而是计较的少!
展开
-
Vue 父组件更改子组件样式
Vue 父组件更改子组件样式<style lang="css" scoped> //TODO </style>中 scoped 是受保护的,当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装固更改子组件的style时是失效的解决方案:1、去除scoped (不推荐)<style lang="css"> .test{ background-color原创 2022-05-05 14:24:18 · 2668 阅读 · 0 评论 -
Chrome Color 如何实现颜色采集器
看代码:const eyeDropper = new (window as any).EyeDropper();eyeDropper.open().then((eyeDropperResult: { sRGBHex: string;}) => { console.log(eyeDropperResult.sRGBHex)});官网地址:在这里,可根据浏览器支持度,判断是否支持,可直接使用,拿走不谢!目前浏览器支持度如下:...原创 2022-05-03 15:01:12 · 1155 阅读 · 0 评论 -
Input[type=‘range’] 标签去除内置阴影
Input[type=‘range’] 标签去除内置阴影原创 2022-04-24 17:54:21 · 526 阅读 · 0 评论 -
Input[type=‘color’] 标签去除内置阴影
H5 Input[type='color’] 标签去除内置阴影,如下图所示:解决如下:<input type="color" value="#ff0000"><style> input[type="color"] { -webkit-appearance: none; border: none; padding: 0; border-radius: 2px; } input[type="color"]::-webkit-color原创 2022-04-21 18:14:45 · 885 阅读 · 0 评论 -
三种方式:object、embed、mask引用 Svg 并更改样式
方式1:使用Object、embed标签引入html<div class="item"> <object data="test.svg" type="image/svg+xml"></object> <embed src="test.svg" type="image/svg+xml" /></div>更改颜色,大小可通过css处理.item { overflow: hidden; object,embed { c原创 2022-04-20 19:17:13 · 2715 阅读 · 0 评论 -
CSS记录 - 2021-08-10
CSS记录background-image: linear-gradient( -45deg , rgba(34, 34, 34, 0.2) 12.5%, #0000 12.5%, #0000 50%, rgba(34, 34, 34, 0.2) 50%, rgba(34, 34, 34, 0.2) 62.5%, #0000 62.5%, #0000 100% ); background-size: 8px 8px;效果背景图:原创 2021-08-10 19:07:22 · 134 阅读 · 0 评论 -
无固定高度的div垂直居中
无固定高度的div垂直居中 – CSS实现效果图如下:代码附上:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=0"> <meta name="apple-m原创 2016-04-05 14:47:45 · 4413 阅读 · 1 评论 -
CSS 资料总结
1、H5表单禁止复制、粘贴的方法 (1)、HTML //禁止复制: <input type=text value="fdg" size=50 onselectstart="return false"> //禁止粘贴: <input type=text value="fdg" size=50 onpaste="return false"> (2)、CSS //禁止用户 长按原创 2017-05-11 16:31:16 · 421 阅读 · 0 评论 -
px rem 转换的几种方法(分辨率字体调整)
目前(2016-06-19)px转rem 的工具已经不少了。下面介绍几个转换的方案。 转换方式1: 使用 在线-px转rem 在线 px 转换 rem 工具地址:http://520ued.com/tools/rem转换方式2: 使用 sublime text 3 rem插件自动转换。 效果如下: 使用步骤 1、下载插件 https://github.com/原创 2016-06-19 15:43:26 · 16008 阅读 · 2 评论 -
CSS/CSS3常用Style
1、实现以下功能:代码附上:2、如何实现“颜色渐变”这种功能效果图,如下图:代码附上:3、在标题文字后面加图片如图所示,在ul li 的末尾处加入向右的箭头4、改变背景颜色(1)上下分开(2)左右分开(3)左上角渐变5、文本过长,不换行用省略号显示效果图附上:demo 附上:6、两端对齐7、文字换行8、禁用鼠标Style一、 布局1、效果12、效果23、效果3 属性让所有灵活的项目都带有相同的长度,忽略它们的内容。浏览器支持除了 ,其他所有主流浏览器都支持原创 2016-03-01 17:09:00 · 1107 阅读 · 1 评论 -
CSS选择器详解(总结)
一、CSS选择器。a、基本选择器详解。 名称 语法构成 描述 返回值 示例 标签选择器 element 根据给定的标签名匹配元素 元素集合 $(“h2”)选取所有的h2元素 类选择器 .class 根据给定的class匹配元素 元素集合 $(“.title”)选取所有class为title的元素 ID选择器 id 根据给定的原创 2016-04-17 12:44:25 · 1487 阅读 · 0 评论 -
各大网站CSS代码初始化集合
各大网站CSS代码初始化集合 css代码之所以初始化,是因为能尽量减少 各浏览器之间的兼容性问题!腾讯QQ官网 样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial转载 2016-04-07 15:29:58 · 1374 阅读 · 0 评论 -
select标签 style设置
如下图所示我要所说的效果:未改变前可以通过css来改变,从而达到如下效果图,代码附上:通过CSS来改变vertical-align:middle;-webkit-appearance: none;-moz-appearance: none;appearance: none;demo附上:<!DOCTYPE html><html> <head> <meta name="v原创 2016-03-14 13:50:11 · 3542 阅读 · 0 评论