CSS

[CSS] 공책처럼 줄 바탕 넣기 - linear-gradient()

hans-j 2023. 1. 3. 23:04

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

 

linear-gradient() - CSS: Cascading Style Sheets | MDN

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

developer.mozilla.org

 linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
  linear-gradient(#eee .1em, transparent .1em);

<!-- HTML -->
<div class="background">
  <h1>Han's 개발 블로그</h1>
  ---중략----
</div>
/* CSS */
.background {
  background-color: #fff;
  background-image:
  linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
  linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% 1.2em;
  padding-left:10%;
}

저작자표시 비영리 (새창열림)