七 設定1畫素邊框的顯示顏色

1.引入1畫素邊框的css檔案

border.css

@charset

"utf-8"
;.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after
/* border
* 因，邊框是由偽元素區域遮蓋在父級
* 故，子級若有互動，需要對子級設定
* 定位 及 z軸
*/.border::before
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before
@media
(max--moz-device-pixel-ratio
: 1.49), (
-webkit-max-device-pixel-ratio
: 1.49), (
max-device-pixel-ratio
: 1.49), (
max-resolution
: 143dpi), (
max-resolution
: 1.49***x)
@media
(min--moz-device-pixel-ratio
: 1.5) and (
max--moz-device-pixel-ratio
: 2.49), (
-webkit-min-device-pixel-ratio
: 1.5) and (
-webkit-max-device-pixel-ratio
: 2.49), (
min-device-pixel-ratio
: 1.5) and (
max-device-pixel-ratio
: 2.49), (
min-resolution
: 144dpi) and (
max-resolution
: 239dpi), (
min-resolution
: 1.5***x) and (
max-resolution
: 2.49***x)
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after
}@media
(min--moz-device-pixel-ratio
: 2.5), (
-webkit-min-device-pixel-ratio
: 2.5), (
min-device-pixel-ratio
: 2.5), (
min-resolution
: 240dpi), (
min-resolution
: 2.5***x)
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after
}

"title border-topbottom">當前城市

....
// 控制頁面上1畫素邊框顯示的顏色
.border-topbottom
&:before
border-color #ccc
&:after
border-color #ccc

border-topbottom 是在div的上下都設定1畫素邊線

border-bottom 是在div的下部設定1畫素邊線

border-top 是在div的上部設定1畫素邊線

手機實現1畫素邊框顯示

問題需求 頁面設定邊框1畫素時，電腦端顯示是正常的，手機端會顯示比正常粗一點。1 給需要顯示1畫素邊框的元素新增偽類元素，設定邊框為1px。注意 這個時候和直接在元素本身設定邊框是一樣的效果，達不到真正顯示1畫素的問題。2 然後用media 查詢，設定偽類元素的縮放比例。media only scr...

JTable設定某一特定邊框的顏色小記

在製表過程當中，總有些奇怪的需求，比如這次的要讓table的某乙個特定的邊框顏色指定。查詢api後發現table有個方法叫setgridcolor。但是這個方法是設定整體的框架顏色，不是我所要的，於是乎，度娘，谷哥，讓我上吧！終於，翻閱n變api手冊後發現一點點蛛絲馬跡 從border下手。考慮到可...

偽類 縮放 實現1畫素的下邊框（使用less）

如果直接給乙個1畫素的border，在pc端瀏覽是真的1畫素，如果在手機端瀏覽，就不是1畫素，因為手機端的物理畫素是裝置畫素的兩倍，所以在375畫素下的手機顯示的是2畫素的border 設計稿一般是750 這裡把偽類和縮放的樣式放在兩個不同的less檔案中 mixin.less 樣式根據自己的需求來...