分类 默认分类 下的文章

/www/server/nginx/conf

proxy_temp_path /www/server/nginx/proxy_temp_dir;
proxy_cache_path /www/server/nginx/proxy_cache_dir levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=5g;
client_body_buffer_size 512k;
proxy_connect_timeout 60;
proxy_read_timeout 60;
proxy_send_timeout 60;
proxy_buffer_size 32k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
proxy_cache cache_one;

原文章链接:
https://juejin.cn/post/7010944239609577508

文字渐变+描边


    .form-title{
        background-image: linear-gradient(#FFCF02, #FF7352);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; /*需要文字透明*/
        -webkit-text-stroke: 2px #fff; /*描边*/
    }
    .form-title::before{
        content: attr(data-title);
        position: absolute;
        background-image: linear-gradient(#FFCF02, #FF7352);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0;
    }
    <div class="h3 text-center margin-bottom-sm form-title" data-title="浪漫惊喜信息确认">浪漫惊喜信息确认</div>

CSS 文字描边

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px #333;
}
<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

SVG 文字渐变

.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}
<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
  <text class="text">为你定制 发现精彩</text>
</svg>

SVG 文字描边

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

圆角描边

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
  stroke-linejoin: round; /*路径转角为圆角*/
}

场景:jquery.html()获取DOM的代码时如果页面有html代码则发现是被转义的,如果要恢复的话需要做相应处理。

张鑫旭老师的文章:
https://www.zhangxinxu.com/wordpress/2021/01/dom-api-html-encode-decode/

摘要:

///不好用
let str = '&lt;span&gt;by zhangxinxu&lt;/span&gt;';
let doc = new DOMParser().parseFromString(str, 'text/html');
console.log(doc.documentElement.textContent);
///没试
let textarea = document.createElement('textarea');
textarea.innerHTML = '&lt;span&gt;by zhangxinxu&lt;/span&gt;';
console.log(textarea.childNodes[0].nodeValue);

推荐:
DOM API方法的缺点
DOM API方法利用了浏览器的能力,更容易上手,转义结果也更安全,但是有个不足,那就是只能在浏览器上下文环境中使用。例如,如果是Service Workers环境,或者是Node.js环境中,这个方法就不行了,只能使用传统的字符串处理方法了。

/**
 * 转义HTML标签的方法
 * @param  {String} str 需要转义的HTML字符串
 * @return {String}     转义后的字符串
 */
var funEncodeHTML = function (str) {
    if (typeof str == 'string') {
        return str.replace(/<|&|>/g, function (matches) {
            return ({
                '<': '&lt;',
                '>': '&gt;',
                '&': '&amp;'
            })[matches];
        });
    }

    return '';
};
/**
 * 反转义HTML标签的方法
 * @param  {String} str 需要反转义的字符串
 * @return {String}     反转义后的字符串
 */
var funDecodeHTML = function (str) {
    if (typeof str == 'string') {
        return str.replace(/&lt;|&gt;|&amp;/g, function (matches) {
            return ({
                '&lt;': '<',
                '&gt;': '>',
                '&amp;': '&'
            })[matches];
        });
    }

    return '';
};


  public static function debugRunTime()
        $info = debug_backtrace(0, 1)[0];
        //最后一次记录的耗时
        $last = empty(self::$ts) ? 0 : self::$ts[count(self::$ts) - 1]['time'];
        //累计耗时
        $sum = microtime(1) - RUN_START_TIME;
        $path = str_replace(Yii::app()->basePath, '/', $info['file']);
        self::$ts[] = [
            'time'   => $sum,
            'add'    => $sum - $last,
            'file'   => "({$info['line']}){$path}",
            'memory' => memory_get_usage(),
        ];
}