Guest User

Untitled

a guest
Nov 20th, 2017
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.89 KB | None | 0 0
  1. outline:1px solid white;
  2.  
  3. box-shadow: 0 0 0 1px black; // Outside black border 1px
  4.  
  5. box-shadow: 0 0 0 1px white inset; // Inside white border 1px
  6.  
  7. box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
  8.  
  9. .right-border {
  10. position: relative;
  11. }
  12.  
  13. .right-border:after {
  14. content: '';
  15. display: block;
  16. position: absolute;
  17. top: 0; right: 0;
  18. width: 1px;
  19. height: 100%;
  20. background: #e0e0e0;
  21. }
  22.  
  23. &:before {
  24. content: '';
  25. display: block;
  26. position: absolute;
  27. top: 0; right: 0; bottom: 0; left: 0;
  28. border: 1px solid #b7b7b7;
  29. }
  30.  
  31. div {
  32. float:left;
  33. width: 50%;
  34. border:1px solid black;
  35. margin: -1px;
  36.  
  37. }
  38.  
  39. <body>
  40. <div>A block</div>
  41. <div>Another block</div>
  42. </body>
  43.  
  44. .outer { width: 50%; float: left;}
  45. .inner { border: 1px solid black; }
  46.  
  47. <body>
  48. <div class="outer">
  49. <div class="inner">A block</div>
  50. </div>
  51. <div class="outer">
  52. <div class="inner">Another block</div>
  53. <div>
  54. </body>
  55.  
  56. #test, #test2 {
  57. width: 100px;
  58. height:100px;
  59. background-color:yellow;
  60. }
  61. #test {
  62. -webkit-box-sizing: border-box;
  63. -moz-box-sizing: border-box;
  64. box-sizing: border-box;
  65. border: 10px dashed blue;
  66. }
  67. #test2 {
  68. outline: 10px dashed red;
  69. }
  70.  
  71.  
  72. <p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
  73. <div id="test">border-box</div>
  74. <p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
  75. <div id="test2">outline</div>
  76.  
  77. .myDiv {
  78. width: 100px;
  79. height: 100px;
  80. padding-left: 2px;
  81. padding-right: 2px;
  82. }
  83.  
  84. .myDiv:hover {
  85. padding-left: 0;
  86. padding-right: 0;
  87. border-left: 2px solid red;
  88. border-right: 2px solid red;
  89. }
  90.  
  91. body { background-color: #FFF; }
  92.  
  93. .myDiv {
  94. width: 100px;
  95. height: 100px;
  96. border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
  97. }
  98.  
  99. .myDiv:hover {
  100. border-color: blue; // Just change the border color
  101. }
Add Comment
Please, Sign In to add comment