Viền phông chữ – GeeksforGeeks – màu viền văn bản css

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : màu đường viền văn bản css

Đôi khi chúng ta cần tạo văn bản và thêm đường viền cho văn bản. Chủ yếu có hai phương pháp để tạo đường viền cho các phông chữ được liệt kê bên dưới:

  • Sử dụng thuộc tính text-shadow
  • Sử dụng text-stroke thuộc tính

Phương pháp 1: Sử dụng thuộc tính text-shadow: Thuộc tính text-shadow được sử dụng để thêm đường viền phông chữ hoặc bóng đổ vào văn bản.
Cú pháp:

 text-shadow: h-shadow v-shadow shadow-radius color | none | Initial | inherit; 

Giá trị thuộc tính:

  • h-shadow: Nó đặt bóng ngang xung quanh phông chữ. < / li>
  • v-shadow: Nó đặt bóng dọc xung quanh phông chữ.
  • bán kính mờ: Nó đặt bán kính mờ xung quanh phông chữ.
  • color: Nó đặt màu xung quanh phông chữ.
  • none: Nó không đặt bất kỳ thứ gì xung quanh phông chữ .
  • tên đầu tiên: Nó đặt đường viền phông chữ thành giá trị mặc định của nó.
  • inherit: Nó kế thừa các giá trị thuộc tính từ giá trị gốc.

Giá trị trả về: Giá trị này trả về viền / bóng phông chữ xung quanh văn bản.
Ví dụ 1: Đây ví dụ sử dụng thuộc tính text-shadow để tạo bóng cho văn bản.

html

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

< code class = "trơn"> & lt; head & gt;

& lt; title & gt;

Thuộc tính CSS text-shadow

& lt; / title & gt;

& lt; style & gt;

h1 {

text-shadow: 0 0 3px # FF0000, 0 0 5px # 0000FF;

}

< p class = "line number13 index12 alt2"> & lt; / style & gt;

& lt; / head & gt;

& lt ; body & gt;

& lt; h1 & gt; GeeksforGeeks & lt; / h1 & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

Ví dụ 2: Ví dụ này sử dụng thuộc tính text-shadow để tạo văn bản có viền.

html


< / p>



& lt;! DOCTYPE html & gt;

& lt; html & gt;

< code class = "trơn"> & lt; head & gt;

& lt; title & gt;

Thuộc tính CSS text-shadow

& lt; / title & gt;

& lt; style & gt;

< code class = "undefined space"> . GFG {

color: white;

< code class = "trơn"> font-size: 50px;

text-sh adow: -1px 1px 0 # 000,

1px 1px 0 # 000,

1px -1px 0 # 000,

- 1px -1px 0 # 000;

}

< p class = "line number19 index18 alt2"> & lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; p class = "GFG" & gt; GeeksforGeeks & lt; / p & gt;

& lt; / body & gt;

< / code>

& lt; / html & gt;

 
  

Đầu ra:

Phương pháp 2: Sử dụng thuộc tính text-stroke: Thuộc tính text-stroke được sử dụng để thêm nét vào văn bản. Thuộc tính này có thể được sử dụng để thay đổi chiều rộng và màu sắc của văn bản. Thuộc tính này được hỗ trợ bằng cách sử dụng tiền tố -webkit-.
Ví dụ: Ví dụ này sử dụng thuộc tính text-stroke để tạo văn bản có viền.

html


< / p>



& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt;

Thuộc tính CSS text-stroke

& lt; / title & gt;

& lt; style & gt;

. GFG {

color: white;

font-size: 50px;

- webkit-text-stroke-width: 1px;

< code class = "trơn"> - webkit-text-stroke-color: black;

}

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; p class < code class = "trơn"> = "GFG" & gt; GeeksforGeeks & lt; / p & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

Trình duyệt được hỗ trợ:

  • Google Chrome 4.0
  • Internet Explorer 10.0
  • Firefox 3.5
  • Opera 9.6
  • Safari 4.0

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS CSS này Ví dụ .

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề màu viền văn bản css

CSS Tutorial - Zero to Hero (Complete Course)

alt

  • Tác giả: freeCodeCamp.org
  • Ngày đăng: 2019-10-16
  • Đánh giá: 4 ⭐ ( 6460 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn CSS in this full course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website.

    In this course, we cover CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.

    You will learn about:
    •Coloring
    •Formatting
    •Text
    •Layout
    •Grid
    •Flexbox
    •Animations
    •Transitions
    •And more!

    💻 Code: https://github.com/Video-Lab/css-course-content

    🎥 Course from Jad Khalili. To view more content from this instructor, visit:
    https://www.udemy.com/user/jad-khalili/

    ⭐️ Course Contents ⭐️
    ⌨️ (0:00:00) Course Achievements & Results
    ⌨️ (0:02:36) Introduction to Course
    ⌨️ (0:11:19) Downloading Necessary Software
    ⌨️ (0:12:30) Where to Find Project Files

    ⌨️ (0:14:28) What is CSS?
    ⌨️ (0:17:09) Creating & Linking a CSS Stylesheet
    ⌨️ (0:20:39) How to Test a Stylesheet

    ⌨️ (0:22:12) What is a Selector?
    ⌨️ (0:25:54) Classes & ID's in HTML
    ⌨️ (0:31:52) Specificity & When to use Selectors
    ⌨️ (0:39:13) Pseudoselectors
    ⌨️ (0:47:58) Advanced Selectors
    ⌨️ (0:59:30) Attribute Selectors
    ⌨️ (0:09:38) What are Properties?
    ⌨️ (1:12:59) The CSS General Rule

    ⌨️ (1:17:37) Types of Colors
    ⌨️ (1:24:53) Coloring Text
    ⌨️ (1:32:30) Background Colors
    ⌨️ (1:36:56) Images/URL's in CSS
    ⌨️ (1:42:30) Other Background Properties
    ⌨️ (1:48:59) Opacity/Transparency
    ⌨️ (1:52:17) Gradients

    ⌨️ (2:04:12) Introduction to Types of Units
    ⌨️ (2:15:57) Text Manipulation
    ⌨️ (2:23:54) Font Size, Bolding & Style
    ⌨️ (2:30:33) Font Families
    ⌨️ (2:37:08) Including External Fonts w/ Google Fonts
    ⌨️ (2:43:14) Using External Fonts

    ⌨️ (2:49:07) The CSS Box Model
    ⌨️ (2:53:18) Changing Content Size
    ⌨️ (2:59:07) CSS Borders
    ⌨️ (3:05:51) Margin & Padding
    ⌨️ (3:15:17) Float & Display Types

    ⌨️ (3:27:47) What is Flexbox?
    ⌨️ (3:31:35) Creating a Flex Container
    ⌨️ (3:34:09) Flex Direction & Wrap
    ⌨️ (3:38:26) Content Alignment
    ⌨️ (3:44:45) Flex Item Order
    ⌨️ (3:49:32) Shrink, Grow, & Basis
    ⌨️ (4:00:03) The 'flex' Property
    ⌨️ (4:03:21) Item Alignment

    ⌨️ (4:08:16) Grid vs Flexbox
    ⌨️ (4:11:14) Creating a Grid
    ⌨️ (4:13:30) Template Columns & Rows
    ⌨️ (4:21:12) Justify & Align Grid
    ⌨️ (4:28:10) Row & Column Gaps
    ⌨️ (4:33:13) Column & Row Lines
    ⌨️ (4:40:46) Grid Area

    ⌨️ (4:44:38) The Transition Property
    ⌨️ (4:58:05) Transformation Functions
    ⌨️ (5:12:26) Creating Animations w/ Keyframes
    ⌨️ (5:20:30) Adding an Animation
    ⌨️ (5:23:23) Animation Properties

    ⌨️ (5:34:49) Website Transformation Challenge
    ⌨️ (5:38:22) Website Transformation - SOLUTION
    ⌨️ (6:13:32) What to Learn Next

    --

    Learn to code for free and get a developer job: https://www.freecodecamp.org

    Read hundreds of articles on programming: https://www.freecodecamp.org/news

    And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Tên và mã màu CSS

  • Tác giả: www.rapidtables.org
  • Đánh giá: 3 ⭐ ( 6612 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tên và mã màu CSS.

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 7838 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Đường viền trong CSS (CSS border)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 3760 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các kiểu đường viền trong CSS, Thay đổi độ rộng của đường viền, Thay đổi màu viền, Thay đổi các mặt riêng lẻ của đường viền, Sử dụng gộp nhiều thuộc tính đường viền, Đường viền vát tròn đỉnh trong CSS

Thuộc tính Màu sắc trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 6348 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu các phương pháp định nghĩa các giá trị màu khác nhau trong CSS theo 3 cách khác nhau

Đường viền trong CSS | Border trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 3908 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đường viền trong CSS | Border trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Bảng mã màu CSS, code color chuẩn trong thiết kế website

  • Tác giả: mylop.edu.vn
  • Đánh giá: 3 ⭐ ( 7195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sở hữu bảng mã màu CSS chuẩn, bạn sẽ tự tin hơn khi thiết kế, lập trình web, bởi màu sắc là một phần không thể thiếu trong thế giới Internet. Ở bài viết này,

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Ví dụ về thủ tục được lưu trữ trong Sql - thủ tục lưu trữ ví dụ sql