欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何只用CSS制作一個(gè)網(wǎng)格(類似于繪圖紙網(wǎng)格)？

CSS
錢艷冰2年前8瀏覽0評論

如何只用CSS制作一個(gè)網(wǎng)格(類似于繪圖紙網(wǎng)格)？ 我只想用CSS做一個(gè)虛擬網(wǎng)格紙。

# # #要制作網(wǎng)格，你可以使用CSS漸變，它適用于所有現(xiàn)代瀏覽器。

使用線性漸變繪制線條網(wǎng)格:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

###

body {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

# # #既然你提到了襯紙:

div {
  background-color: #fff;
  background-size: 100% 1.2em;
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
  behavior: url(/PIE.htc);
}

<div style="width: 200px; height: 200px"></div>

# # #一個(gè)圓錐梯度()可以完成這項(xiàng)工作

html {
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0) 
    0 0/50px 50px;
}

# # #你可以做的是抓取一個(gè)像這樣的網(wǎng)格圖像:

Grid PNG

然后用CSS平鋪:

#background {
  background: url('path/to/grid-image.png');
}

所以，是的，不僅僅是CSS——你也需要圖像，但是解決方案應(yīng)該非常簡潔。這就是它的作用:

#background {
    width: 200px;
    height: 160px;
    background: url('http://i.stack.imgur.com/GySvQ.png');
}

<div id="background"></div>

# # #完成svg和base64。 可以通過更改svg中的寬度、高度和顏色參數(shù)來修改比例和顏色。 這里有兩個(gè)不同大小的藍(lán)色和白色正方形網(wǎng)格的例子。

.blue-square-grid-20px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='100%' height='100%' fill='%230000ff' /%3E%3Crect x='50%' width='2' height='100%' fill='%231ff' /%3E%3Crect y='50%' width='100%' height='2' fill='%231ff' /%3E%3C/svg%3E%0A");
}

.white-square-grid-40px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='%23ddd' /%3E%3Crect y='50%' width='100%' height='1' fill='%23ddd' /%3E%3C/svg%3E%0A");
}

.example-box {
  width: 100vw;
  height: 100px;
}

<p>blue grid, 20px grid size and 2px line width</p>
<div class="blue-square-grid-20px example-box"></div>
<p>white grid, 40px grid size and 1px line width</p>
<div class="white-square-grid-40px example-box"></div>

# # #如果你想得到真正的繪圖紙的額外加粗的線條，并且不介意使用::before和::after，你可以這樣做:

body {
        position: relative;
        border-radius: 0 !important;
        background-color: #ecefff;
        background-size: 0.5rem 0.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
        margin: 0;
    }
    body::before, body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 2.5rem 2.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
        z-index: -1;
    }
    body::after {
        background-size: 5rem 5rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
    }

body {
        position: relative;
        border-radius: 0 !important;
        background-color: #ecefff;
        background-size: 0.5rem 0.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
        margin: 0;
    }
    body::before, body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 2.5rem 2.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
        z-index: -1;
    }
    body::after {
        background-size: 5rem 5rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
    }

# # #由于我們已經(jīng)有了點(diǎn)線網(wǎng)格和實(shí)線網(wǎng)格的解決方案，為了完整起見，這里有一個(gè)虛線網(wǎng)格的解決方案(點(diǎn)線或單線也是可以的)。只需根據(jù)需要調(diào)整CSS變量。

這里有一把小提琴:https://jsfiddle.net/0nt7v9bj/

.dashed-grid-paper {

    --grid-size: 30px;
    --grid-strength: 1px;
    --grid-dash: 10px;
    --grid-gap: 5px;
    --grid-color: #ddd;
    --paper-color: #fff;

  background-color: var(--paper-color);
  background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), 
    linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
    linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}

<body class="dashed-grid-paper">
<p style="margin: 40px">How to make a dashed line grid paper<br>like background using CSS only.</p>
</body>