发表新帖
发表新帖

How to give border to any element using css without adding border-width to the whole width of element?

前端 未结
关注
11 1843
礼貌的吻别
礼貌的吻别 2020-12-02 10:19

How to give border to any element using css without adding border-width to the whole width of element?

Like in Photoshop we can give stroke- Inside , center and out

相关标签:
11条回答
  • 心在旅途
    2020-12-02 10:46

    outline:3px solid black || border:3px solid black

    div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}
    <div>
hello world
</div>

    0 讨论(0)
  • 别跟我提以往
    2020-12-02 10:49

    Depending on your intended browser support you can use the box-shadow property.

    You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).

    Example:

    box-shadow: 0 0 0 1px black; // Outside black border 1px

    or

    box-shadow: 0 0 0 1px white inset; // Inside white border 1px

    One great advantage of using box shadow is you can get creative by using multiple box shadows:

    box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

    The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.

    0 讨论(0)
  • 小鲜肉
    2020-12-02 10:53

    Use padding when there is no border. Remove padding when there is a border.

    .myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

    Essentially, just replace the 2px padding with 2px borders. Div size remains the same.

    0 讨论(0)
  • 醉酒成梦
    2020-12-02 10:55

    Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.

    Use outline to create a border OUTSIDE a div without modifying div width.

    Here an example: https://jsfiddle.net/4000cae9/1/

    Notes: border-box currently it is not supported by IE

    Support:

    http://caniuse.com/#feat=outline

    http://caniuse.com/#search=border-box

    #test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
    0 讨论(0)
  • 生来不讨喜
    2020-12-02 10:55

    As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:

    div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

    With this html:

    <body>
  <div>A block</div>
  <div>Another block</div>
</body>

    One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:

    .outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

    And the html:

    <body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>
    0 讨论(0)
  • 再見小時候
    2020-12-02 10:57

    Check out CSS box-sizing...

    The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.

    • -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    • -moz-box-sizing: border-box; /* Firefox, other Gecko */
    • box-sizing: border-box; /* Opera/IE 8+ */

    I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

    0 讨论(0)
 看不清?
提交回复
热议问题