วิธีใดที่จะจำกัดความยาวของเส้นขอบ

มีวิธีใดบ้างที่จะจำกัดความยาวของเส้นขอบ ฉันมี<div>เส้นขอบด้านล่าง แต่ฉันต้องการเพิ่มเส้นขอบด้านซ้ายของเส้น<div>นั้นที่ทอดยาวเพียงครึ่งทาง

มีวิธีการใด ๆ โดยไม่ต้องเพิ่มองค์ประกอบพิเศษในหน้า?

หวังว่านี่จะช่วย:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

CSS สร้างเนื้อหาสามารถแก้ปัญหานี้ให้คุณ:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

<div>Lorem Ipsum</div>

(หมายเหตุ - การcontent: "";ประกาศมีความจำเป็นเพื่อให้องค์ประกอบหลอกให้เรนเดอร์)

:afterหิน :)

หากคุณเล่นบิตคุณสามารถตั้งค่าองค์ประกอบเส้นขอบที่ปรับขนาดให้ปรากฏกึ่งกลางหรือปรากฏขึ้นเฉพาะในกรณีที่มีองค์ประกอบอื่นติดกับองค์ประกอบดังกล่าว (เช่นในเมนู) นี่คือตัวอย่างของเมนู:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

ด้วยคุณสมบัติ CSS เราสามารถควบคุมความหนาของเส้นขอบเท่านั้น ไม่ความยาว

อย่างไรก็ตามเราสามารถเลียนแบบผลกระทบชายแดนและควบคุมมันwidthและheightตามที่เราต้องการด้วยวิธีอื่น

ด้วย CSS (การไล่ระดับสีเชิงเส้น):

เราสามารถใช้linear-gradient()เพื่อสร้างภาพพื้นหลังและควบคุมขนาดและตำแหน่งของมันด้วย CSS เพื่อให้ดูเหมือนเป็นเส้นขอบ เนื่องจากเราสามารถนำภาพพื้นหลังหลาย ๆ รูปมาใช้กับองค์ประกอบเราสามารถใช้คุณสมบัตินี้เพื่อสร้างเส้นขอบหลายแบบเช่นภาพและใช้กับองค์ประกอบด้านต่างๆ นอกจากนี้เรายังสามารถครอบคลุมพื้นที่ที่เหลือด้วยสีทึบการไล่ระดับสีหรือภาพพื้นหลัง

HTML ที่ต้องการ:

สิ่งที่เราต้องการคือองค์ประกอบเดียวเท่านั้น (อาจมีบางคลาส)

<div class="box"></div>

ขั้นตอน:

1. สร้างภาพพื้นหลัง (s) linear-gradient()ด้วย
2. ใช้background-sizeเพื่อปรับwidth/ heightของภาพที่สร้างขึ้นด้านบนเพื่อให้ดูเหมือนเป็นเส้นขอบ
3. ใช้background-positionเพื่อปรับตำแหน่ง (เช่นleft, right, left bottomฯลฯ ) ดังกล่าวข้างต้นชายแดนสร้าง (s)

CSS ที่จำเป็น:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

ตัวอย่าง:

ด้วยlinear-gradient()เราสามารถสร้างเส้นขอบของสีทึบเช่นเดียวกับการไล่ระดับสี ด้านล่างนี้คือตัวอย่างของเส้นขอบที่สร้างด้วยวิธีนี้

ตัวอย่างที่ใช้เส้นขอบด้านเดียวเท่านั้น:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

ตัวอย่างที่ใช้เส้นขอบทั้งสองด้าน:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

ตัวอย่างที่มีการใช้เส้นขอบในทุกด้าน:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

ภาพหน้าจอ:

สำหรับเส้นแนวนอนคุณสามารถใช้แท็กชม:

hr { width: 90%; }

แต่มันเป็นไปไม่ได้ที่จะจำกัดความสูงของเส้นขอบ ความสูงขององค์ประกอบเท่านั้น

เส้นขอบถูกกำหนดไว้ด้านข้างเท่านั้นไม่ใช่ในส่วนของด้านข้าง ดังนั้นไม่คุณไม่สามารถทำได้

นอกจากนี้องค์ประกอบใหม่จะไม่เป็นขอบเช่นกันมันจะเลียนแบบพฤติกรรมที่คุณต้องการเท่านั้น แต่ก็ยังคงเป็นองค์ประกอบ

อีกวิธีในการทำเช่นนี้คือการใช้เส้นขอบภาพร่วมกับการไล่ระดับสีเชิงเส้น

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

รองรับเบราว์เซอร์: IE: 11+

Chrome: ทั้งหมด

Firefox: 15+

สำหรับการสนับสนุนที่ดีกว่าให้เพิ่มคำนำหน้าผู้ขายด้วย

ภาพชายแดนแคนาดา

นี่เป็นเคล็ดลับ CSS ไม่ใช่วิธีแก้ปัญหาอย่างเป็นทางการ ฉันปล่อยรหัสด้วยเครื่องหมายจุดดำเพราะมันช่วยให้ฉันวางตำแหน่งองค์ประกอบ หลังจากนั้นให้สีเนื้อหาของคุณ (color: white) และ (margin-top: -5px หรือมากกว่านั้น) เพื่อทำให้เหมือนไม่มีช่วงเวลา

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

อีกวิธีคือคุณสามารถใช้ภาพพื้นหลังเพื่อเลียนแบบลักษณะขอบด้านซ้าย

1. สร้างสไตล์เส้นขอบซ้ายที่คุณต้องการเป็นกราฟิก
2. วางตำแหน่งไว้ที่ด้านซ้ายสุดของ div ของคุณ (ทำให้ยาวพอที่จะรองรับขนาดข้อความที่เพิ่มขึ้นสองขนาดสำหรับเบราว์เซอร์รุ่นเก่า)
3. กำหนดตำแหน่งแนวตั้ง 50% จากด้านบนสุดของ div

คุณอาจต้องปรับแต่ง IE (ตามปกติ) แต่ก็คุ้มค่ากับการถ่ายถ้านั่นคือการออกแบบที่คุณต้องการ

• โดยทั่วไปแล้วฉันไม่ได้ใช้รูปภาพสำหรับบางสิ่งที่ CSS ให้มาโดยกำเนิด แต่บางครั้งหากการออกแบบต้องการมันก็ไม่มีวิธีอื่นใด

คุณสามารถกำหนดหนึ่งชายแดนต่อด้านเท่านั้น คุณจะต้องเพิ่มองค์ประกอบพิเศษสำหรับสิ่งนั้น!