Tạo nét đứt trong css

Thuộc tính border-style có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái)

Thí dụ

Trình diễn các kiểu đường viền khác nhau

p. chấm {kiểu viền. chấm;}
p. nét đứt {kiểu viền. gạch ngang;}
p. rắn {kiểu viền. vững chắc;}
p. gấp đôi {kiểu viền. gấp đôi;}
p. rãnh {kiểu đường viền. rãnh;}
p. sườn núi {kiểu đường viền. sườn núi;}
p. chèn {kiểu đường viền. hình nhỏ;}
p. bắt đầu {kiểu đường viền. đầu tiên;}
p. không {kiểu viền. không;}
p. ẩn {kiểu viền. ẩn;}
p. trộn {kiểu viền. nét đứt nét đứt kép;}

Kết quả

Đường viền chấm

Đường viền nét đứt

Biên giới vững chắc

Đường viền đôi

Đường viền rãnh. Hiệu ứng phụ thuộc vào giá trị màu viền

Một đường viền sườn núi. Hiệu ứng phụ thuộc vào giá trị màu viền

Một đường viền chèn. Hiệu ứng phụ thuộc vào giá trị màu viền

Đường viền ban đầu. Hiệu ứng phụ thuộc vào giá trị màu viền

không biên giới

Một đường viền ẩn

Biên giới hỗn hợp

Ghi chú. Không thuộc tính đường viền CSS KHÁC nào (mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo) sẽ có BẤT KỲ hiệu ứng nào trừ khi thuộc tính border-style được đặt

Việc sử dụng đường viền trong quá trình thiết kế giao diện người dùng của trang web là điều không thể thiếu để tổng thể trang trông đẹp hơn. Đường viền thường được chia làm hai loại, một là đường viền liền và một là đường viền ảo. Đường viền liền được sử dụng nhiều hơn, nhưng với đường nét đứt hoặc trang trí đường viền nét đứt thì trang web sẽ đẹp hơn, vì vậy nên sử dụng cả hai loại đường viền

Bạn đặt đường viền cho thuộc tính đường viền trong Css, thông thường cần đặt 3 giá trị, cụ thể là. chiều rộng, kiểu đường kẻ và màu sắc. Đặt đường là đường liền nét hoặc đường đứt nét chủ yếu đặt kiểu đường kẻ. Nó chủ yếu có hai giá trị, cụ thể là. nét liền và nét đứt, nét trước biểu thị đường liền nét và nét sau biểu thị nét đứt

I. đường đứt nét css

Mã HTML

<ul class="uldashed">
              < <li>Css dashed lineli>
              <li>Css dashed borderli>
       ul>

phong cách css

.uldashed { đường viền . 1px rắn #c7255d ; . width:300px ; . height:60px ; lề . 0 ; phần đệm . 0 ; . line-height:26px ;}
        . li uldashed { đường viền đáy . 1px gạch ngang #c7255d ; kiểu danh sách. không có ;}

hiệu ứng hình ảnh

• đường đứt nét css
• Đường viền gạch ngang css

Phong cách Css ở trên là đặt một đường đứt nét cho mỗi dòng của ul và sự kết hợp giữa ảo và thực tốt hơn nhiều so với một mình đường liền nét. Trong các ứng dụng thực tế, nét đứt của dòng cuối cùng nên được ẩn đi để đẹp hơn, miễn là bạn đặt kiểu Css và đặt border-bottom thành none

II. Đường viền gạch ngang css

Mã HTML

<ul class="uldashedborder">
              < <li>Css dashed borderli>
              <li>Border dashed line cssli>
       ul>

phong cách css

.uldashedborder { đường viền . 1px gạch ngang #c7255d ; . width:300px ; . height:60px ; lề . 0 ; phần đệm . 0 ; . line-height:26px ; . padding-bottom:23px ;}
        . uldashedborder li { border-bottom . 1px solid #c7255d ; kiểu danh sách. không có ;}

hiệu ứng hình ảnh

• Đường viền gạch ngang css
• Đường nét đứt trong css

Phong cách Css ở trên là đặt đường viền là nét đứt và phần dưới của dòng là nét liền, điều này hoàn toàn ngược lại với ví dụ trên và hiệu quả không tốt bằng. Nói chung, các đường nét đứt thường được sử dụng bên trong các đường viền liền nét

III. Đường viền gạch ngang dài trong css

Mã HTML

<div class="longDashedBorder"><span class="text">Css long dash borderspan>div>

phong cách css

.longDashedBorder { vị trí . tương đối ; . margin:68px 0 0 130px ; . height:44px ; chiều rộng . 86px ; . display:chặn nội tuyến ; . border:nét đứt 1px #f20afb ; . transform:tỷ lệ (4) ; . overflow:ẩn ;}
        . văn bản { vị trí . tương đối ; . margin:-54px 0 0 -106px ; . float:trái ; . height:150px ; chiều rộng . 300px ; . line-height:22px ; . display:chặn nội tuyến ; . transform:tỉ lệ(0. 28) ;}

hiệu ứng hình ảnh

Đường viền đứt nét dài ở trên được triển khai với tỷ lệ thuộc tính phóng đại Css, do đó đường đứt nét sẽ tăng chiều dài nhưng không mở rộng; . Sử dụng tỷ lệ, ngoài việc phóng to đường viền, còn phóng to các yếu tố khác, bạn cần phải điều chỉnh lại chúng, điều này rắc rối hơn

IV. không gian css nét đứt

Mã HTML

<div class="dashedSpace">div>
       <div class="dashedSpace linear">div>

phong cách css

.dashedSpace {
               chiều rộng . 350px ;
               chiều cao . 1px ;
               lề trên . 10px;
               hình nền . dốc tuyến tính(sang phải, #f20afb 0%, #f20afb 50%, trong suốt 50%);
               nền . :28px 1px ;
               background-repeat:repeat-x ;
       }

.linear {
               hình nền . gradient tuyến tính(sang phải, #ccc 0%, #f20afb 50%, trong suốt 50%) ;
              < . background-size:40px 1px ;
       }

hiệu ứng hình ảnh

Đường nét đứt của kiểu nét đứt không thể điều chỉnh khoảng cách, chỉ có thể sử dụng chức năng tạo độ dốc linear-gradient(), "sang phải" có nghĩa là độ dốc từ trái sang phải, "#ccc 0% có nghĩa là" màu điểm bắt đầu và tỷ lệ phần trăm màu