记录问题-----CSS

哈哈哈_是我
633 阅读2分钟

1.颜色

0xCCFFFFFF ---- argb --- 表示有透明度
0xFFFFFF ---无透明度

0x --- 0x是固定的，表示十六进制 CC --- 透明度 FFFFFF

#ffffff --- hex 是16进制
rgb(225,225,225) Rgb采用的是10进制

将hex表示方式转换为rgb表示方式(这里返回rgb数组组合)

function colorRgb(sColor){
   var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
   var sColor = sColor.toLowerCase();
   if(sColor && reg.test(sColor)){
       if(sColor.length === 4){
           var sColorNew = "#";
           for(var i=1; i<4; i+=1){
                   sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
           }
           sColor = sColorNew;
       }
       //处理六位的颜色值
       var sColorChange = [];
       for(var i=1; i<7; i+=2){
           sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
       }
       return sColorChange;
   }else{
           return sColor;
   }
};

// 将rgb表示方式转换为hex表示方式

function colorHex(rgb){
   var _this = rgb;
   var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
   if(/^(rgb|RGB)/.test(_this)){
       var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
       var strHex = "#";
       for(var i=0; i<aColor.length; i++){
           var hex = Number(aColor[i]).toString(16);
           hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
           if(hex === "0"){
                   hex += hex;
           }
           strHex += hex;
       }
       if(strHex.length !== 7){
           strHex = _this;
       }
       return strHex;
   }else if(reg.test(_this)){
       var aNum = _this.replace(/#/,"").split("");
       if(aNum.length === 6){
           return _this;
       }else if(aNum.length === 3){
           var numHex = "#";
           for(var i=0; i<aNum.length; i+=1){
                   numHex += (aNum[i]+aNum[i]);
           }
           return numHex;
       }
   }else{
           return _this;
   }
}
console.log(colorRgb('#043869'));
console.log(colorHex('rgb(150,01,89)'));

js中RGB转hex

var rgb = '220,20,60';
alert(rgb2hex(rgb));
//将RGB转换成#HEX
function rgb2hex(rgb) {
    var reg=/(\d{1,3}),(\d{1,3}),(\d{1,3})/;
    var arr=reg.exec(rgb);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    var _hex="#" + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
    return _hex.toUpperCase();
}

简易

 // 将rgb颜色转成hex
function colorRGB2Hex(color) {
    var rgb = color.split(',');
    var r = parseInt(rgb[0].split('(')[1]);
    var g = parseInt(rgb[1]);
    var b = parseInt(rgb[2].split(')')[0]);

    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
}
// 将hex颜色转成rgb
function hexToRgba(hex, opacity) {
    var RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt( "0x" + hex.slice(5, 7)) + "," + opacity + ")";
    return {
        red: parseInt("0x" + hex.slice(1, 3)),
        green: parseInt("0x" + hex.slice(3, 5)),
        blue: parseInt("0x" + hex.slice(5, 7)),
        rgba: RGBA
    }
}
rgb色转成hex : colorRGB2Hex(“rgb(255,255,255)”); 返回hex值 如#cccccc
hex转成rgba: hexToRgba("#cccccc", 1); // 第一个参数为hex色值，第二个参数为透明度，返回对象

将RGBA颜色转换为16进制的颜色

function hexify(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',');
  var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  return "#" +
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify('rgba(255,232,186,0.4)'); // "#f5faf3"

console.log(myHex);

从ARGB颜色数值中，改变透明通道（Alpha）的值

/**
 * 改变透明通道的值
 * @param fraction [0,1]透明通道的值，0为全透明，1为不透明
 * @param color 需要改变的颜色值
 * @return 改变透明通道后的值，如：alphaEvaluator（0.5f,0xFFFFFFFF） = 0x80FFFFFF
*/
public static int alphaEvaluator(float fraction,int color){
        int r = (color >> 16) & 0xff;
        int g = (color >> 8) & 0xff;
        int b = color & 0xff;

        return (int)((int)(256 * fraction) << 24) | r << 16 | g << 8 | b ;
}
————————————————
版权声明：本文为CSDN博主「HaibLee」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/HaibLee/java/article/details/51614852

JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)

  var a = 'FFFFFF';
  var b = parseInt(a,16) 16进制转10进制
  parseInt(b,10).toString(16) 10进制转16进制

原文链接:javascript将16进制的字符串转换为10进制整数hex_javascript技巧_脚本之家 (jb51.net)

条纹css

background: linear-gradient(-45deg, #F55D5D 25%, #e03838 0, #e03838 50%, #F55D5D 0, #F55D5D 75%, #e03838 0);
background-size:20px 20px;


原文链接：(www.cnblogs.com/ypppt/p/131…)

径向渐变

background: radial-gradient(#dbf5f5,#77f5f5,#21f1f1);

滚动条

::-webkit-scrollbar                滚动条整体部分
::-webkit-scrollbar-thumb          滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track          滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button         滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece    内层轨道，滚动条中间部分
::-webkit-scrollbar-corner         边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer                  两个滚动条的交汇处上用于拖动调整元素大小的小控件
(https://www.jianshu.com/p/99968cfc7675）

scrollbar-3d-light-color​立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color​上下按钮上三角箭头的颜色
scrollbar-base-color​滚动条的基本颜色
scrollbar-dark-shadow-color​立体滚动条强阴影的颜色
scrollbar-face-color​立体滚动条凸出部分的颜色
scrollbar-highlight-color​滚动条空白部分的颜色
scrollbar-shadow-color​立体滚动条阴影的颜色

隐藏滚动条
.element::-webkit-scrollbar{
  display:none
}

在CSS中使用JS变量

<template>
 <h1 :style="{ color }">Vue</h1>
</template>

<script>
export default {
 data () {
   return {
       color: 'red'
   }
 }
}
</script>

<template>
 <h1>{{ color }}</h1>
</template>

<script>
export default {
 data () {
   return {
     color: 'red'
   }
 }
}
</script>

<style vars="{ color }">
h1 {
 color: var(--color);
}
</style>

原文链接：(zhuanlan.zhihu.com/p/208562064)

css 居中

<div class="content"><span>居中</span></div>
第一种
.content{
  position: relative;
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
第二种
.content{
  display: flex; align-items: center; justify-content: center;
}

文本对齐方式

垂直

justify-content: center;
align-items: 'flex-start' | 'flex-end' | 'center';

水平

align-items: center;
justify-content： 'flex-start' | 'flex-end' | 'center';

flex

垂直排列情况下，居中 局左 局右 对齐 根据align-items调整

display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;

水平排列情况下，居中 局左 局右 对齐 根据justify-content调整

css 布局

flex 上下布局

<div class="dms-g2plot" :style="titleStyle" style="display:flex; flex-direction:column">
    <div style="border:1px solid red;">
      {{title}}
    </div>
    <div style="flex:1; border:1px solid pink;position:relative">
      <slot></slot>
    </div>
  </div>

根据title的高度自动变化 flex: 1 的相对定位 子节点用绝对定位，子节点就会跟随 flex: 1 的元素变化(插槽中的节点)

背景css

background:#2A2E33;
background-image:
    linear-gradient(#2A2E33 14px,transparent 0),
    linear-gradient(90deg,#525D63 2px,transparent 0);
background-size:15px 15px,15px 15px;

原文链接[:](CSS条纹背景，点阵背景，圆点背景。 - 简书 (jianshu.com))

class动态 style动态

:class="['webgl-button', 'webgl-control', { 't-button-clicked': false }]"
:class="{ 'webgl-control': true, 'webgl-button': true }"

:style="[styleCss,isHover ? hoverStyle : '']"
:style="{'margin-bottom': title ? '3px' : '',...titleStyle}"
avatar
文章
阅读
粉丝