CSS
关注
分享
扫一扫
小小程序员——Tracy
你说 程序员是青春饭吗？
展开
-
material-icons 汇总
【代码】material-icons 汇总。原创 2024-08-21 09:37:46 · 156 阅读 · 0 评论 -
Bulma Tracy 小笔记
【代码】Bulma Tracy 小笔记。原创 2022-10-28 21:33:43 · 136 阅读 · 0 评论 -
根据背景颜色，设置文字颜色是黑色还是白色
【代码】根据背景颜色，设置文字颜色是黑色还是白色。原创 2022-10-27 19:59:37 · 536 阅读 · 0 评论 -
border 颜色渐变
虚线渐变 <style>.box { border-bottom: 2px dashed #fff; border-right: 2px dashed #fff; background: linear-gradient(to right, rgb(0, 255, 127),rgba(26, 115, 232, 0.953)); background-origin: border-box;}.content { background-color: #ff原创 2021-05-30 10:40:42 · 5345 阅读 · 0 评论 -
vue 修改 v-html 中元素的样式 style失效问题
用三个右箭头来搞定<style scoped> .content>>> .kxb-center span.kub-title{ /* vue 想改变 v-html 的东西就得这么写 */ margin-top: 20px; font-size: 18px; font-family: PingFangSC-Medium, PingFang SC; font-weight: bold; color: rgba(26, 26, 26, 1); text-a原创 2021-05-13 10:52:14 · 798 阅读 · 0 评论 -
CSS 收藏 - Tracy 小笔记
不同 size 编写 @media only screen and (min-width:0px) and (max-width:579px) 让字能看清 : style="text-shadow:1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;" 背景颜色渐变： background: linear-gradient(54deg,#e6d6ff 0,#dbfbfb 100%); 蒙板： style="background: rgb原创 2021-04-22 17:17:30 · 186 阅读 · 0 评论 -
javascript对任意颜色获取更亮或更暗的颜色值
预处理CSS，比如Sass和less可以通过设定一个特定值，让任何颜色变得更亮或者更暗。但是在javascript中却没有这种方法。下面这个方法能在javascript中得到一个更亮或者更暗的值，通过一个给定的十六进制颜色值（比如#F06D06,或者没有#）function LightenDarkenColor(col, amt) { var usePound = false; if (col[0] == "#") { col = col.slic.转载 2021-04-22 16:15:51 · 712 阅读 · 0 评论 -
BootStrap - Tracy 小笔记
BootStrapcolumn 结构 12列<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"> <div class="row"> <div class="col-*-*">嵌套 column </div> <div class="c...原创 2021-04-22 15:25:25 · 106 阅读 · 0 评论 -
导航下划线样式
鼠标滑过，bottom 黄线从中间展开到两边<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0}a{text-decoration: none;color: black;}ul{list-style: none;}.center_1200{width: 1200原创 2021-04-02 15:25:03 · 126 阅读 · 0 评论 -
Flip card 卡片翻转效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <style type="text/c.原创 2021-04-02 14:03:45 · 562 阅读 · 0 评论 -
Flex 布局教程：语法篇
Flex 布局教程：语法篇转载自：阮一峰的网络日志网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本...转载 2021-04-02 09:05:00 · 367 阅读 · 0 评论 -
文字过长的 css 处理
文字过长，只显示两行 ….hidden-part-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}文字超出显示范围 … 结尾overflow: hidden; white-space:nowrap; text-overflow:ellipsis;英文字母过长换行hyphens: auto; word-wrap: break-w原创 2021-03-30 16:07:38 · 237 阅读 · 0 评论