ಡಬಲ್ ಗಡಿ css. CSS ಬಳಸಿಕೊಂಡು ಡಬಲ್ ಬಾರ್ಡರ್. CSS: ಗಡಿ. ಎಲಿಮೆಂಟ್ ಬೌಂಡ್ಸ್

ವಿವರಣೆ

ಅಂಶದ ಸುತ್ತ ಗಡಿ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಅಂಶದ ವಿವಿಧ ಬದಿಗಳಿಗೆ ಪ್ರತ್ಯೇಕ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸಲು ಅನುಮತಿ ಇದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್

ಗಡಿ ಶೈಲಿ: (1,4) | ಆನುವಂಶಿಕವಾಗಿ

ಮೌಲ್ಯಗಳು

ಗಡಿಯ ನೋಟವನ್ನು ನಿಯಂತ್ರಿಸಲು ಗಡಿ ಶೈಲಿಯ ಆಸ್ತಿಗಾಗಿ ಹಲವಾರು ಮೌಲ್ಯಗಳನ್ನು ಒದಗಿಸಲಾಗಿದೆ.

ನೋಟವು ಬಳಸಿದ ಬ್ರೌಸರ್ ಮತ್ತು ಗಡಿಯ ದಪ್ಪವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಕೋಷ್ಟಕದಲ್ಲಿ 1 ಶೈಲಿಗಳ ಹೆಸರುಗಳನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ವಿಭಿನ್ನ ದಪ್ಪದ ಮೌಲ್ಯಗಳಿಗೆ ಪರಿಣಾಮವಾಗಿ ಫ್ರೇಮ್ - 1, 3, 5 ಮತ್ತು 7 ಪಿಕ್ಸೆಲ್ಗಳು.

ಕೋಷ್ಟಕದಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಮೌಲ್ಯಗಳ ಜೊತೆಗೆ, ಈ ಕೆಳಗಿನ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಯಾವುದೂ ಗಡಿಯನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ ಮತ್ತು ಅದರ ದಪ್ಪವನ್ನು (ಗಡಿ-ಅಗಲ) ಶೂನ್ಯಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ.

ಮರೆಮಾಚುವಿಕೆಯು ಅಂಚು-ಶೈಲಿಯನ್ನು ಟೇಬಲ್ ಸೆಲ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುವುದರ ಹೊರತಾಗಿ ಅದೇ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿಲ್ಲ . ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಕೋಶದ ಸುತ್ತಲಿನ ಗಡಿಯು ಕಾಣಿಸುವುದಿಲ್ಲ.

ಆನುವಂಶಿಕವಾಗಿ ಪೋಷಕರ ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.

ನೀವು ಒಂದು, ಎರಡು, ಮೂರು ಅಥವಾ ನಾಲ್ಕು ಮೌಲ್ಯಗಳನ್ನು ಸ್ಪೇಸ್‌ನಿಂದ ಬೇರ್ಪಡಿಸಬಹುದು. ಪರಿಣಾಮವು ಪ್ರಮಾಣವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ ಮತ್ತು ಕೋಷ್ಟಕದಲ್ಲಿ ಸೂಚಿಸಲಾಗುತ್ತದೆ. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

ಗಡಿ ಶೈಲಿ

ಲೊರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟ್ಯೂರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್, ಸೆಡ್ ಡೈಮ್ ನೊನಮ್ಮಿ ನಿಭ್ ಯುಯಿಸ್ಮೋಡ್ ಟಿನ್ಸಿಡುಂಟ್ ಯುಟ್ ಲ್ಯಾಕ್ರೀಟ್ ಡೋಲೋರ್ ಮ್ಯಾಗ್ನಾ ಅಲಿಗುಮ್ ಎರಟ್ ವೋಲ್ಟ್ಪಾಟ್.

ಈ ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶವನ್ನು ಅಂಜೂರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ. 1.

ಅಕ್ಕಿ. 1. ಗಡಿ ಶೈಲಿಯ ಆಸ್ತಿಯನ್ನು ಅನ್ವಯಿಸುವುದು

ವಸ್ತು ಮಾದರಿ

document.getElementById("elementID ").style.borderStyle

ಬ್ರೌಸರ್‌ಗಳು

ಆವೃತ್ತಿ 6 ರವರೆಗಿನ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಬ್ರೌಸರ್ 1px ನ ಗಡಿಯ ದಪ್ಪದೊಂದಿಗೆ ಡ್ಯಾಶ್ ಮಾಡಲಾದ ಡಿಸ್ಪ್ಲೇಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. 2px ಮತ್ತು ಹೆಚ್ಚಿನ ದಪ್ಪದೊಂದಿಗೆ, ಚುಕ್ಕೆಗಳ ಮೌಲ್ಯವು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ದೋಷವನ್ನು IE7 ನಲ್ಲಿ ಸರಿಪಡಿಸಲಾಗಿದೆ, ಆದರೆ ಎಲ್ಲಾ 1px ಗಡಿಗಳಿಗೆ ಮಾತ್ರ. ಬ್ಲಾಕ್ ಗಡಿಗಳಲ್ಲಿ ಒಂದು 2px ಅಥವಾ ಹೆಚ್ಚಿನ ದಪ್ಪವನ್ನು ಹೊಂದಿದ್ದರೆ, ನಂತರ IE7 ನಲ್ಲಿ ಚುಕ್ಕೆಗಳ ಮೌಲ್ಯವು ಡ್ಯಾಶ್ ಆಗಿ ಬದಲಾಗುತ್ತದೆ. 7.0 ವರೆಗಿನ ಮತ್ತು ಒಳಗೊಂಡಂತೆ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಆವೃತ್ತಿಗಳು ಗುಪ್ತ ಮತ್ತು ಆನುವಂಶಿಕ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.ಗ್ರೂವ್ , ರಿಡ್ಜ್ , ಇನ್‌ಸೆಟ್ , ಅಥವಾ ಔಟ್‌ಸೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುವಾಗ ಬಾರ್ಡರ್ ಶೈಲಿಯು ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ಸ್ವಲ್ಪ ಬದಲಾಗಬಹುದು.

ನಾವು ಪಠ್ಯ ಮತ್ತು ಫಾಂಟ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿದ್ದೇವೆ, ಈಗ ಇತರ ಅಂಶಗಳಿಗೆ ತೆರಳಲು ನಮ್ಮ ಸರದಿ. ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನಾವು ಬಳಸಿ ಚೌಕಟ್ಟುಗಳನ್ನು ರಚಿಸುವುದನ್ನು ನೋಡುತ್ತೇವೆ CSSಮತ್ತು ನಾವು ಅದರ ಸುತ್ತಲೂ ಚೌಕಟ್ಟನ್ನು ಮಾಡುತ್ತೇವೆ.

ಫ್ರೇಮ್ ಅನ್ನು ನಿರೂಪಿಸುವ ನಿಯತಾಂಕಗಳು: 1) ಫ್ರೇಮ್ ದಪ್ಪ, 2) ಫ್ರೇಮ್ ಶೈಲಿ ಮತ್ತು 3) ಫ್ರೇಮ್ ಬಣ್ಣ. ಮತ್ತು ಕ್ರಮವಾಗಿ ಹೋಗೋಣ:

1. ಫ್ರೇಮ್ ದಪ್ಪ: ಗಡಿ ಅಗಲ: 2px;
2. ಫ್ರೇಮ್ ಶೈಲಿ: ಗಡಿ ಶೈಲಿ: ಘನ;
3. ಫ್ರೇಮ್ ಬಣ್ಣ: ಗಡಿ ಬಣ್ಣ: #ff0000;

ಫ್ರೇಮ್ ಶೈಲಿಗಳು ಯಾವುವು 7.0 ವರೆಗಿನ ಮತ್ತು ಒಳಗೊಂಡಂತೆ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಆವೃತ್ತಿಗಳು ಗುಪ್ತ ಮತ್ತು ಆನುವಂಶಿಕ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.? ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಫ್ರೇಮ್ ಶೈಲಿಗಳು ಕೆಳಗೆ:

ಚುಕ್ಕೆಗಳಿಂದ ಕೂಡಿದೆ - ಇದು ಡಾಟ್ ಫ್ರೇಮ್ ಆಗಿದೆ.
ಡ್ಯಾಶ್ ಮಾಡಿದ - ಇದು ಚುಕ್ಕೆಗಳ ಚೌಕಟ್ಟು
ಘನ - ಇದು ಘನ ಚೌಕಟ್ಟು
ದುಪ್ಪಟ್ಟು - ಇದು ಡಬಲ್ ಫ್ರೇಮ್
ತೋಡು - ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ನೋಟ
ಪರ್ವತಶ್ರೇಣಿ - ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ನೋಟ
ಒಳಹೊಕ್ಕು - ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ನೋಟ
ಪ್ರಾರಂಭ - ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ನೋಟ

ಶೀರ್ಷಿಕೆಯ ಸುತ್ತಲೂ ಚೌಕಟ್ಟನ್ನು ರಚಿಸಲು ಈಗ ನಾವು ಎಲ್ಲವನ್ನೂ ಹೊಂದಿದ್ದೇವೆ.

HTML

HTML ಪುಟ

ಶೀರ್ಷಿಕೆಯ ಸುತ್ತಲೂ ಚೌಕಟ್ಟನ್ನು ರಚಿಸಿ.

ಮತ್ತು ಫ್ರೇಮ್ ಸ್ವತಃ ಶೈಲಿ.

H2(ಗಡಿ-ಅಗಲ: 2px; ಗಡಿ-ಶೈಲಿ: ಘನ; ಗಡಿ-ಬಣ್ಣ: #FF0000; )

ಪರಿಣಾಮವಾಗಿ, ದಪ್ಪವನ್ನು ಹೊಂದಿರುವ ಘನ ಕೆಂಪು ಚೌಕಟ್ಟು 2px.

ಚೌಕಟ್ಟನ್ನು ನಾಲ್ಕು ಬದಿಗಳಿಂದ ರಚಿಸಲಾಗಿದೆ: ಮೇಲ್ಭಾಗ, ಸರಿ, ಕಡಿಮೆಮತ್ತು ಎಡಕ್ಕೆಮತ್ತು, ನಾವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಗಡಿ , ನಂತರ ಬ್ರೌಸರ್ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಫ್ರೇಮ್‌ನ ಎಲ್ಲಾ ನಾಲ್ಕು ಬದಿಗಳನ್ನು ಸೆಳೆಯುತ್ತದೆ. ಹೀಗಾಗಿ, ನೀವು ಕೇವಲ ಒಂದು ಬದಿಯಲ್ಲಿ ಫ್ರೇಮ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾದರೆ, ಫ್ರೇಮ್ ಅನ್ನು ಎಲ್ಲಿ ರಚಿಸಬೇಕು ಎಂಬುದನ್ನು ಸೂಚಿಸಲು ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಮೇಲ್ಭಾಗ - ಟಾಪ್.
ಬಲ - ಸರಿ
ಕೆಳಗೆ - ಕೆಳಗೆ
ಬಿಟ್ಟರು - ಎಡ

ಹೀಗಾಗಿ, ನಾವು ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಕೆಳಭಾಗದಲ್ಲಿ ಮಾತ್ರ ಫ್ರೇಮ್ ಮಾಡಲು ಬಯಸಿದರೆ, ಅಂದರೆ, ಅದನ್ನು ಅಂಡರ್ಲೈನ್ ಮಾಡಿ, ನಂತರ ಪ್ರತಿ ಆಸ್ತಿಗೆ ಗಡಿ ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಸೇರಿಸಿ ಕೆಳಗೆ . ಫಲಿತಾಂಶವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ರಚನೆಯಾಗಿರುತ್ತದೆ.

H2(ಅಡಿಗೆ-ಕೆಳ-ಅಗಲ: 2px; ಗಡಿ-ಕೆಳಗೆ-ಶೈಲಿ: ಡಬಲ್; ಗಡಿ-ಕೆಳಗೆ-ಬಣ್ಣ: #FF0000; )

ಬ್ರೌಸರ್‌ಗಾಗಿ ಈ ಶೈಲಿಗಳನ್ನು ಬಳಸುವುದರಿಂದ ನೀವು ಕೆಳಗಿನಿಂದ ಫ್ರೇಮ್ ಅನ್ನು ಮಾತ್ರ ರಚಿಸಬೇಕಾಗಿದೆ, ಅಂದರೆ. ಶೀರ್ಷಿಕೆಯನ್ನು ಒತ್ತಿಹೇಳುತ್ತದೆ. ಅದೇ ರೀತಿಯಲ್ಲಿ, ಫ್ರೇಮ್ ಅನ್ನು ಇನ್ನೊಂದು ಬದಿಯಲ್ಲಿ ಹೊಂದಿಸುವ ಮೂಲಕ ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ನಕಲು ಮಾಡಬಹುದು, ಉದಾಹರಣೆಗೆ ಮೇಲ್ಭಾಗ.

H2(ಗಡಿ-ಕೆಳ-ಅಗಲ: 2px; ಗಡಿ-ಕೆಳ-ಶೈಲಿ: ಡಬಲ್; ಗಡಿ-ಕೆಳಗೆ-ಬಣ್ಣ: #FF0000; ಗಡಿ-ಮೇಲಿನ-ಅಗಲ: 2px; ಗಡಿ-ಮೇಲ್ಭಾಗ-ಶೈಲಿ: ಡಬಲ್; ಗಡಿ-ಮೇಲಿನ ಬಣ್ಣ: # FF0000;

ಶೀರ್ಷಿಕೆಯು ಈಗ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಕೆಂಪು ಅಂಚುಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇತರ ಪಕ್ಷಗಳಿಗೂ ಇದೇ ರೀತಿ ಮಾಡಬಹುದು.

ನೀವು ಬಹುಶಃ ಈಗಾಗಲೇ ಗಮನಿಸಿದಂತೆ, ರೆಕಾರ್ಡಿಂಗ್ ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ, ಆದ್ದರಿಂದ ಆಚರಣೆಯಲ್ಲಿ ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುವ ಸಂಕ್ಷಿಪ್ತ ರೀತಿಯ ರೆಕಾರ್ಡಿಂಗ್ ಇದೆ.

ಮೇಲಿನ ಚಿತ್ರವು ಸಂಕ್ಷಿಪ್ತ ಸಂಕೇತದ ರಚನೆಯನ್ನು ತೋರಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಆಸ್ತಿಯನ್ನು ಸೂಚಿಸಲಾಗುತ್ತದೆ ಗಡಿ ಮತ್ತು ಮೌಲ್ಯಗಳಾಗಿ, ಜಾಗದಿಂದ ಬೇರ್ಪಟ್ಟು, ಚೌಕಟ್ಟಿನ ಅಗಲವನ್ನು ಸೂಚಿಸಲಾಗುತ್ತದೆ - ಗಡಿ-ಅಗಲ , ಫ್ರೇಮ್ ಶೈಲಿ - ಗಡಿ ಶೈಲಿ ಮತ್ತು ಫ್ರೇಮ್ ಬಣ್ಣ - #ff0000 .

ಅಂದರೆ, ಬ್ರೌಸರ್, ಅಂತಹ ಸಂಕ್ಷಿಪ್ತ ನಮೂದನ್ನು ನೋಡುವುದು ಗಡಿ: 2px ಘನ #ff0000; , ಶೀರ್ಷಿಕೆಯ ಎಲ್ಲಾ ನಾಲ್ಕು ಬದಿಗಳಲ್ಲಿ ಚೌಕಟ್ಟನ್ನು ಸಹ ರಚಿಸುತ್ತದೆ. ಈ ಕಿರು ನಮೂದು ನಾವು ಮೇಲೆ ಬಳಸಿದ ನಮೂದುಗೆ ಸಮನಾಗಿರುತ್ತದೆ (ಅಲ್ಲಿ ಮೂರು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಲಾಗಿದೆ).

ಚಿಕ್ಕ ಸಂಕೇತವನ್ನು ಬಳಸಿದರೆ ನೀವು ಫ್ರೇಮ್ ಅನ್ನು ಕೇವಲ ಒಂದು ಬದಿಯಲ್ಲಿ ಸೂಚಿಸಬೇಕಾದರೆ, ನಾವು ಫ್ರೇಮ್ ಅನ್ನು ರಚಿಸುವ ಬದಿಯನ್ನು ಸೂಚಿಸುವ ಸಿಂಪಲ್ಟನ್ ಅನ್ನು ಆಸ್ತಿಗೆ ಸೇರಿಸುತ್ತೇವೆ.

H2( ಗಡಿ-ಮೇಲ್ಭಾಗ:2px ಘನ #ff0000; )

ಆದ್ದರಿಂದ, ಸಣ್ಣ ಟಿಪ್ಪಣಿಯನ್ನು ಬಳಸಿ, ಮೇಲಿನಿಂದ ಚೌಕಟ್ಟನ್ನು ತಯಾರಿಸಲಾಗುತ್ತದೆ, ಅಲ್ಲಿ ಚೌಕಟ್ಟಿನ ದಪ್ಪ, ಶೈಲಿ ಮತ್ತು ಬಣ್ಣವನ್ನು ಸಹ ಸೂಚಿಸಲಾಗುತ್ತದೆ.

ಈ ರೀತಿಯಲ್ಲಿ, ಆಸ್ತಿಯನ್ನು ಬಳಸಿ ಗಡಿ ಯಾವುದೇ ಅಂಶದ ಸುತ್ತಲೂ ಚೌಕಟ್ಟನ್ನು ತಯಾರಿಸಲಾಗುತ್ತದೆ. ಅಂಡರ್‌ಲೈನ್‌ಗೆ ಬೇರೆ ಬಣ್ಣದ ಅಗತ್ಯವಿರುವಾಗ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಅಂಡರ್‌ಲೈನ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಫ್ರೇಮ್ ಅನ್ನು ಸಹ ಬಳಸಬಹುದು. ಸರಿ, ಚೌಕಟ್ಟಿನೊಂದಿಗೆ ಅಷ್ಟೆ, ಮುಂದಿನ ಪ್ರಮುಖ ಪಾಠಕ್ಕೆ ಹೋಗೋಣ, ಅಲ್ಲಿ ನಾವು ನೋಡುತ್ತೇವೆ

ಆಸ್ತಿ 7.0 ವರೆಗಿನ ಮತ್ತು ಒಳಗೊಂಡಂತೆ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಆವೃತ್ತಿಗಳು ಗುಪ್ತ ಮತ್ತು ಆನುವಂಶಿಕ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. – « ಗಡಿ", ಅಂಶದ ಸುತ್ತ ಪರಿಧಿಯ ರೇಖೆಯ ದಪ್ಪ, ಬಣ್ಣ ಮತ್ತು ಪ್ರಕಾರವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಆಸ್ತಿಯ ನಿಯತಾಂಕಗಳನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಬರೆಯಬಹುದು, ಜಾಗದಿಂದ ಬೇರ್ಪಡಿಸಬಹುದು ಮತ್ತು ಯಾವುದೇ ಕ್ರಮದಲ್ಲಿ.

- ಸಾಲಿನ ದಪ್ಪ ಒಂದು ಪಿಕ್ಸೆಲ್
- ಘನ ಸಾಲು
- ಬಿಳಿ ಬಣ್ಣ
- ಕಪ್ಪು ಬಣ್ಣ
- ಬೂದು ಬಣ್ಣ

ಘನ ಅಂಶದ ಗಡಿ

ಡ್ಯಾಶ್ ಅಂಶದ ಗಡಿ

ಚುಕ್ಕೆಗಳ ಅಂಶದ ಅಂಚು

ಡಬಲ್ ಲೈನ್ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ ಅಂಚು

ಪ್ರತ್ಯೇಕ ಗಡಿ ವಿಭಾಗಗಳ ಆಸ್ತಿ

ಪರಿಮಾಣದಲ್ಲಿ ಗ್ರೂವ್ಡ್ ಫ್ರೇಮ್ ಒತ್ತಿದರೆ

ಪರಿಮಾಣದಲ್ಲಿ ಪೀನ ಸುಕ್ಕುಗಟ್ಟಿದ ಚೌಕಟ್ಟು

ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ಪ್ರೆಸ್ಡ್ ಫ್ರೇಮ್

ವಾಲ್ಯೂಮೆಟ್ರಿಕ್ ಪೀನ ಚೌಕಟ್ಟು

ಪಾಠಗಳು / CSS /

ಪಾಠ 7: CSS ಎಲಿಮೆಂಟ್ ಬಾರ್ಡರ್

ಪ್ರತಿಯೊಂದು ವೆಬ್‌ಸೈಟ್ ಒಂದು ಅಂಶದ ಸುತ್ತಲೂ ಗಡಿಯನ್ನು ರಚಿಸುವ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಬಟನ್‌ಗಳಿಗೆ ಅಥವಾ ಪಠ್ಯದೊಂದಿಗೆ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿದೆ. ಗಡಿಯನ್ನು ರಚಿಸಲು, ಒಂದು ಅಂಶವು CSS ನಲ್ಲಿ ಎರಡು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿದೆ: ಗಡಿ ಮತ್ತು ಬಾಹ್ಯರೇಖೆ. ಅವುಗಳನ್ನು ನೋಡೋಣ.

ಗಡಿ

ಒಂದು ಅಂಶದ ಸುತ್ತ ಚೌಕಟ್ಟನ್ನು ಹೊಂದಿಸಲು ಈ ಆಸ್ತಿ ಅಗತ್ಯವಿದೆ; ಇದು 3 ಅರ್ಥಗಳನ್ನು ಹೊಂದಿದೆ - ಬಣ್ಣ, ದಪ್ಪ ಮತ್ತು ಚೌಕಟ್ಟಿನ ಪ್ರಕಾರ.

ಗಡಿ ಆಸ್ತಿಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

ಗಡಿ: ಅಗಲದ ಪ್ರಕಾರದ ಬಣ್ಣ;
ಆಸ್ತಿ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನೀವು ಬೇರೆ ಆದೇಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು, ಆದರೆ ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ ಜಾಗದ ಮೂಲಕ.

ಫ್ರೇಮ್‌ನ ದಪ್ಪವನ್ನು (ಅಗಲ) ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ (px) ಅಥವಾ ಶೇಕಡಾವಾರು (%) ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು.
ಬಣ್ಣವನ್ನು RGB (ಕೆಂಪು ಹಸಿರು ನೀಲಿ) ಸ್ವರೂಪದಲ್ಲಿ ಅಥವಾ HTML HEX ಕೋಡ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಕೆಳಗೆ ಇವೆ ಸಾಲುಗಳ ವಿಧಗಳುಅವರ ಹೆಸರುಗಳೊಂದಿಗೆ:

ಒಂದು ಅಂಶಕ್ಕಾಗಿ ಗಡಿಗಳನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು? ನಾವು ಅದನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಮಾಡುತ್ತೇವೆ:

#ಬ್ಲಾಕ್ (
ಗಡಿ:3px ಘನ #0085ss; /* ರೇಖೆಯನ್ನು 3 ಪಿಕ್ಸೆಲ್‌ಗಳ ದಪ್ಪ ಮತ್ತು ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಿ */
}

ನೀವು ಒಂದು, ಎರಡು, ಮೂರು ಸ್ಥಾಪಿಸಲು ಬಯಸಿದರೆ ಒಂದು ನಿರ್ದಿಷ್ಟ ಭಾಗದಲ್ಲಿ ಚೌಕಟ್ಟುಗಳು, ನಂತರ ನಾವು ಅದನ್ನು ಈ ರೀತಿ ಸೂಚಿಸುತ್ತೇವೆ:

ಗಡಿ-ಮೇಲ್ಭಾಗ- ಮೇಲೆ ಫ್ರೇಮ್;
ಗಡಿ-ಕೆಳಗೆ- ಕೆಳಭಾಗದಲ್ಲಿ ಫ್ರೇಮ್;
ಗಡಿ-ಎಡ- ಎಡಭಾಗದಲ್ಲಿ ಫ್ರೇಮ್;
ಗಡಿ-ಬಲ- ಬಲಭಾಗದಲ್ಲಿ ಫ್ರೇಮ್;

ನಿರ್ಬಂಧಿಸು (
ಗಡಿ-ಬಲ: 3px ಘನ #0085cc;
ಗಡಿ-ಕೆಳಗೆ: 2px ಡ್ಯಾಶ್ #0085cc;
}

ನೀವು ಬಯಸಿದರೆ ಚೌಕಟ್ಟುಗಳನ್ನು ತೆಗೆದುಹಾಕಿ CSS ನಲ್ಲಿ ಅಂಶ, ನಂತರ ಗಡಿ ಆಸ್ತಿಯಲ್ಲಿ ಬರೆಯಿರಿ - ಯಾವುದೂ ಇಲ್ಲ

ಖಾಲಿ (
ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ; /* ವರ್ಗ ಖಾಲಿ ಇರುವ ಅಂಶವು ಗಡಿಯನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ */
}

ರೂಪರೇಖೆ

ಬಾಹ್ಯರೇಖೆಯು ಒಂದು ಅಂಶದ ಹೊರ ಗಡಿಯನ್ನು ಹೊಂದಿಸಲು ಅಗತ್ಯವಿರುವ ಒಂದು ಆಸ್ತಿಯಾಗಿದೆ.

ತಿನ್ನು ಗಡಿಯಿಂದ ಎರಡು ವ್ಯತ್ಯಾಸಗಳು:
ಮೊದಲನೆಯದಾಗಿ, ಔಟ್ಲೈನ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ರೇಖೆಯು ಬ್ಲಾಕ್ನ ಸ್ಥಾನ, ಅದರ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.
ಎರಡನೆಯದಾಗಿ, ಒಂದು ನಿರ್ದಿಷ್ಟ ಭಾಗದಲ್ಲಿ ಫ್ರೇಮ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವ ಸಾಧ್ಯತೆಯಿಲ್ಲ.
ಸಿಂಟ್ಯಾಕ್ಸ್ ಗಡಿಯಂತೆಯೇ ಇರುತ್ತದೆ.

ಬಾಹ್ಯರೇಖೆ: 2px ಚುಕ್ಕೆ #0085cc; /* ಫ್ರೇಮ್ 2 ಪಿಕ್ಸೆಲ್‌ಗಳು ನೀಲಿ ಚುಕ್ಕೆ */
ಬಾಹ್ಯರೇಖೆಗಾಗಿ, ಹಾಗೆಯೇ ಗಡಿಗಾಗಿ, ಯಾವುದನ್ನೂ ಬರೆಯುವ ಮೂಲಕ ನೀವು ಫ್ರೇಮ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು:

ನಿಮ್ಮ ಗಮನಕ್ಕೆ ಧನ್ಯವಾದಗಳು!

ಹಿಂದಿನ ಲೇಖನ
ಪಾಠ 6.

ಅಂಶದ ಗಡಿಗಳು.

CSS ನಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಅಂಚುಗಳು. ಮಾರ್ಜಿನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಎಂದರೇನು? ಮುಂದಿನ ಲೇಖನ
ಪಾಠ 8. CSS ನಲ್ಲಿ ಅಂಶದ ಪಠ್ಯ ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆಯನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು?

ಲೇಖನದ ಕಾಮೆಂಟ್‌ಗಳು (vk.com)

ಗಡಿ

ಬ್ರೌಸರ್ ಬೆಂಬಲ

12.0+

4.0+

1.0+

3.5+

1.0+

ವಿವರಣೆ

CSS ಆಸ್ತಿಯು ಬ್ಲಾಕ್‌ನ ಗಡಿಯ ಅಗಲ, ಶೈಲಿ ಮತ್ತು ಬಣ್ಣವನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬ್ಲಾಕ್ ಬಾರ್ಡರ್ ಎಲ್ಲಾ ಕಡೆಗಳಲ್ಲಿ ಬ್ಲಾಕ್ ಅನ್ನು ಸುತ್ತುವರೆದಿರುವ ನಿಯಮಿತ ಲೈನ್/ಫ್ರೇಮ್ ಆಗಿದೆ. ಚೌಕಟ್ಟನ್ನು ಸೇರಿಸುವಾಗ, ಅದು ಬ್ಲಾಕ್ನ ಒಟ್ಟಾರೆ ಗಾತ್ರದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ.

ಮೌಲ್ಯಗಳನ್ನು ಜಾಗದಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಕ್ರಮದಲ್ಲಿ ಗೋಚರಿಸಬಹುದು, ಬಯಸಿದ ನಿಯತಾಂಕಕ್ಕೆ ಯಾವುದು ಅನುರೂಪವಾಗಿದೆ ಎಂಬುದನ್ನು ಬ್ರೌಸರ್ ಸ್ವತಃ ನಿರ್ಧರಿಸುತ್ತದೆ. ಎಲ್ಲಾ ಮೂರು ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಅಗತ್ಯವಿಲ್ಲ; ಅಗಲ ಮತ್ತು/ಅಥವಾ ಬಣ್ಣವನ್ನು ಬಿಟ್ಟುಬಿಡಬಹುದು, ಈ ಸಂದರ್ಭದಲ್ಲಿ ಕಾಣೆಯಾದ ಮೌಲ್ಯದ ಬದಲಿಗೆ ಆಸ್ತಿಗೆ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಹೊಂದಿಸಲಾದ ಮೌಲ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಅಂದರೆ. ಉದಾಹರಣೆಗೆ, ಅಗಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಆಸ್ತಿಯ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಸಿಂಟ್ಯಾಕ್ಸ್ ಅಡಿಯಲ್ಲಿ ಇರುವ ಟೇಬಲ್ ಯಾವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಬಹುದೆಂದು ಮೌಲ್ಯಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಗಮನಿಸಿ: ಅಂಶದ ಕೆಲವು ಬದಿಗಳಲ್ಲಿ ಮಾತ್ರ ಗಡಿಗಳನ್ನು ಹೊಂದಿಸಲು, ಕೆಳಗಿನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ: ಗಡಿ-ಮೇಲ್ಭಾಗ, ಗಡಿ-ಕೆಳಗೆ, ಗಡಿ-ಎಡ, ಗಡಿ-ಬಲ.

ಸಲಹೆ: ವಿಶಿಷ್ಟವಾಗಿ, ಗಡಿಯನ್ನು ಬಳಸುವಾಗ, ನೀವು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.

CSS ಆಸ್ತಿ: ಗಡಿ

ಅವರು ಬ್ಲಾಕ್ ಫ್ರೇಮ್ ಮತ್ತು ಅದರ ವಿಷಯದ ನಡುವೆ ಬಿಳಿ ಜಾಗವನ್ನು ಸೇರಿಸುತ್ತಾರೆ: ಪಠ್ಯ, ಚಿತ್ರಗಳು ಅಥವಾ ಚೈಲ್ಡ್ ಟ್ಯಾಗ್‌ಗಳು. ಸಾಮಾನ್ಯವಾಗಿ ಗಡಿಯನ್ನು ಅಂಶದ ವಿಷಯಕ್ಕೆ ಹತ್ತಿರ ಎಳೆಯಲಾಗುತ್ತದೆ, ನೀವು ಚಿತ್ರದ ಸುತ್ತಲೂ ಗಡಿಯನ್ನು ಹೊಂದಿಸಬೇಕಾದರೆ ಮಾತ್ರ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್

ಗಡಿ: ಗಡಿ-ಅಗಲ ಗಡಿ-ಶೈಲಿಯ ಗಡಿ-ಬಣ್ಣ|ಆನುವಂಶಿಕವಾಗಿ;

ಆಸ್ತಿ ಮೌಲ್ಯಗಳು

ಉದಾಹರಣೆ

ಇಲ್ಲಿ ಕೆಲವು ಪಠ್ಯವಿದೆ.

ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಈ ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶ:

ಪೆಟ್ಟಿಗೆಗಳಲ್ಲಿ ಗಡಿಯ ಬಣ್ಣ, ಶೈಲಿ ಮತ್ತು ಗಾತ್ರವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು.

ಮಾರ್ಕ್ಅಪ್ ಭಾಷೆಗಳಲ್ಲಿ, ಗಡಿ( ಗಡಿ), ಕೋಷ್ಟಕಗಳು, ಚಿತ್ರಗಳು ಮತ್ತು ಚೌಕಟ್ಟುಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿರಿ, ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಗಡಿಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ಸಾಧ್ಯವಿದೆ ಮತ್ತು ಅಷ್ಟೆ.

ಗಡಿ ಗುಣಲಕ್ಷಣ

ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳು ನಮಗೆ ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳನ್ನು ನೀಡುತ್ತವೆ, ಆದರೆ ಮೊದಲನೆಯದು ಮೊದಲನೆಯದು.

CSS ನಲ್ಲಿ ನಾವು ಬಳಸಿ ಗಡಿಯ ಅಗಲವನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು ಗಡಿ-ಅಗಲ, ಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾಗಿ ಹೇಳಬೇಕೆಂದರೆ, ನಾವು ಪ್ರತಿ ಬದಿಯ ದಪ್ಪವನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನಿಯಂತ್ರಿಸಬಹುದು:
ಗಡಿ-ಮೇಲಿನ ಅಗಲ- ಮೇಲಿನ ಗಡಿಯ ದಪ್ಪ
ಗಡಿ-ಬಲ-ಅಗಲ- ಬಲ ಗಡಿಯ ದಪ್ಪ
ಗಡಿ-ಕೆಳ-ಅಗಲ- ಕೆಳಗಿನ ಗಡಿಯ ದಪ್ಪ
ಗಡಿ-ಎಡ-ಅಗಲ- ಎಡ ದಂಡೆಯ ದಪ್ಪ
ಆದರೆ ಸಂಕ್ಷಿಪ್ತ ರೂಪವೂ ಇರಬಹುದು:
P(ಗಡಿ-ಅಗಲ: ಮೇಲಿನ ಬಲ ಕೆಳಗಿನ ಎಡ;)(ಮೇಲಿನ ಬಲ ಕೆಳಗಿನ ಎಡ).
ಗಡಿ ಅಗಲವನ್ನು ಹೊಂದಿಸಬಹುದು:
ಸಂಖ್ಯೆಯಲ್ಲಿ DIV(ಗಡಿ-ಅಗಲ:5px), ಶೂನ್ಯದಿಂದ ಅನಂತಕ್ಕೆ, ಅಂದರೆ. ಧನಾತ್ಮಕ.
ತೆಳುವಾದ- ತೆಳುವಾದ ಗಡಿ, DIV(ಗಡಿ-ಅಗಲ:ತೆಳು)
ಮಧ್ಯಮ- ಮಧ್ಯಮ ಗಡಿ, DIV(ಗಡಿ-ಅಗಲ:ಮಧ್ಯಮ)
ದಪ್ಪ- ದಪ್ಪ ಗಡಿ, DIV(ಗಡಿ-ಅಗಲ:ದಪ್ಪ)
ಸಂಖ್ಯೆಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆ, ಆದರೆ ಈ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಇದು ಎಲ್ಲಾ ಬ್ರೌಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ತೆಳುವಾದ<= medium <= thick .

ಬಳಸಿ ಗಡಿಯ ಬಣ್ಣವನ್ನು ನಾವು ನಿಯಂತ್ರಿಸಬಹುದು ಗಡಿ-ಬಣ್ಣಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾಗಿ ಹೇಳಬೇಕೆಂದರೆ, ಪ್ರತಿ ಬದಿಯ ಬಣ್ಣ:
ಗಡಿ-ಮೇಲಿನ ಬಣ್ಣಮೇಲಿನ ಅಂಚು ಬಣ್ಣ;
ಗಡಿ-ಬಲ-ಬಣ್ಣಬಲ ಗಡಿ ಬಣ್ಣ;
ಗಡಿ-ಕೆಳ-ಬಣ್ಣಕೆಳಭಾಗದ ಗಡಿ ಬಣ್ಣ;
ಗಡಿ-ಎಡ-ಬಣ್ಣಎಡಭಾಗದಲ್ಲಿ ಗಡಿ ಬಣ್ಣ.
ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ ಬಣ್ಣ, ಅಂದರೆ 16 ಬಣ್ಣಗಳಲ್ಲಿ ಒಂದು: ಆಕ್ವಾ, ಕಪ್ಪು, ನೀಲಿ, ಫ್ಯೂಷಿಯಾ, ಬೂದು, ಹಸಿರು, ನಿಂಬೆ, ಕೆಂಗಂದು, ನೌಕಾಪಡೆ, ಆಲಿವ್, ನೇರಳೆ, ಕೆಂಪು, ಬೆಳ್ಳಿ, ಟೀಲ್, ಬಿಳಿ ಅಥವಾ ಹಳದಿ, ನೀವು ಬಣ್ಣಗಳನ್ನು ಸಹ ಹೊಂದಿಸಬಹುದು: ಬಣ್ಣ:#000000, ಬಣ್ಣ:#AF0 , ಬಣ್ಣ:rgb(255,0,0)ಅಥವಾ ಬಣ್ಣ:rgb(100%, 0%, 0%).
ನೀವು ಯಾವ ಬಣ್ಣದ ಸ್ಕೀಮ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದರೂ, ಬ್ರೌಸರ್‌ಗಳು ಅದನ್ನು ಇನ್ನೂ ಪರಿವರ್ತಿಸುತ್ತವೆ ಬಣ್ಣ:rgb(255,0,0). ಉದಾಹರಣೆಗೆ ಬಣ್ಣ: ಸುಣ್ಣ = ಬಣ್ಣ:#00ff00 = ಬಣ್ಣ:#0F0 = ಬಣ್ಣ:rgb(0%, 100%, 0%), ಆದರೆ ಬ್ರೌಸರ್‌ಗೆ ಇದು ಒಂದೇ ಆಗಿರುತ್ತದೆ ಬಣ್ಣ:rgb(0,255,0), ಅಂದರೆ ಇದು ಈ ಮೌಲ್ಯವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ.

ಗಡಿಯ ದಪ್ಪ ಮತ್ತು ಬಣ್ಣವನ್ನು HTML ನಿಂದ ನಿಯಂತ್ರಿಸಬಹುದಾದರೆ, ಶೈಲಿ( ಗಡಿ ಶೈಲಿ) ಸಿಎಸ್ಎಸ್ ಮಾತ್ರ !!!
ಶೈಲಿಯನ್ನು ಪ್ರತಿ ಬದಿಯಲ್ಲಿ ಪ್ರತ್ಯೇಕವಾಗಿ ನಿಯಂತ್ರಿಸಬಹುದು:
ಗಡಿ-ಮೇಲಿನ ಶೈಲಿಮೇಲಿನ ಗಡಿ ಶೈಲಿ;
ಗಡಿ-ಬಲ-ಶೈಲಿಬಲ ಗಡಿ ಶೈಲಿ;
ಗಡಿ-ಕೆಳ-ಶೈಲಿಕೆಳಭಾಗದ ಗಡಿ ಶೈಲಿ;
ಗಡಿ-ಎಡ-ಶೈಲಿಎಡಭಾಗದ ಗಡಿ ಶೈಲಿ.
ಈಗ ಶೈಲಿಯ ಮೌಲ್ಯಗಳನ್ನು ನೋಡೋಣ:
1)ಗಡಿ ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ- ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದ್ದು, ಬಾರ್ಡರ್ ಅಗಲ: 0 ಗೆ ಹೋಲುತ್ತದೆ.
2)ಗಡಿ ಶೈಲಿ: ಮರೆಮಾಡಲಾಗಿದೆ- ಅದೇ ವಿಷಯ, ಕೋಷ್ಟಕಗಳನ್ನು ಹೊರತುಪಡಿಸಿ, ನಾವು ನಂತರ ನೋಡುತ್ತೇವೆ.
3)ಗಡಿ ಶೈಲಿ: ಚುಕ್ಕೆ- ಚುಕ್ಕೆಗಳಿಂದ ಮಾಡಿದ ಗಡಿ.
4)ಗಡಿ ಶೈಲಿ: ಡ್ಯಾಶ್ ಮಾಡಿದ- ಚುಕ್ಕೆಗಳ ರೇಖೆಯಿಂದ ಮಾಡಿದ ಗಡಿ.
5)ಗಡಿ ಶೈಲಿ: ಘನ- ಘನ ರೇಖೆಯಿಂದ ಮಾಡಿದ ಗಡಿ, ಅಂದರೆ. HTML ನಲ್ಲಿರುವಂತೆ.
6)ಗಡಿ ಶೈಲಿ: ಡಬಲ್- ಎರಡು ಘನ ರೇಖೆಯಿಂದ ಮಾಡಲಾದ ಗಡಿ, ಇಲ್ಲಿ ನಿಮಗೆ ಕನಿಷ್ಠ 3 ಪಿಕ್ಸೆಲ್‌ಗಳ ಗಡಿ ಅಗಲದ ಅಗತ್ಯವಿದೆ.
7)ಗಡಿ ಶೈಲಿ: ತೋಡು- ಗಡಿಯು ಕ್ಯಾನ್ವಾಸ್ನಿಂದ ಕತ್ತರಿಸಿದಂತೆ ಕಾಣುತ್ತದೆ.
8)ಗಡಿ ಶೈಲಿ: ರಿಡ್ಜ್- ಗಡಿಯು ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಚಾಚಿಕೊಂಡಿರುವಂತೆ ಕಾಣುತ್ತದೆ.
9)ಗಡಿ-ಶೈಲಿ:ಇನ್ಸೆಟ್- ಇಡೀ ಪೆಟ್ಟಿಗೆಯು ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಒತ್ತಿದಂತೆ ಕಾಣುತ್ತದೆ.
10)ಗಡಿ ಶೈಲಿ:ಆರಂಭ- ಹಿಂದಿನದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿದೆ.
ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳು ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು: ಚುಕ್ಕೆ, ಡ್ಯಾಶ್, ಡಬಲ್, ಗ್ರೂವ್, ರಿಡ್ಜ್, ಇನ್‌ಸೆಟ್ ಮತ್ತು ಔಟ್‌ಸೆಟ್ ಮತ್ತು ಅವುಗಳನ್ನು ಘನವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಅಂದರೆ. ಒಂದು ಸಾಮಾನ್ಯ ಗಡಿ.

ಇದು ನಿಜ, ಸಹಜವಾಗಿ, ಆದರೆ ಮೇಲಿನ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳು ಕಾರ್ಯಾಚರಣೆಯ ತತ್ವ ಮಾತ್ರ, ಯಾಂತ್ರಿಕವಲ್ಲ.
ನಿಯಮ ಆಸ್ತಿ ಗಡಿಸೂಚಿಸುತ್ತದೆ (ಗಡಿ: ಗಾತ್ರದ ಶೈಲಿಯ ಬಣ್ಣ;), ಎಲ್ಲಾ ಮೂರು ಮೌಲ್ಯಗಳು ಇದ್ದರೆ ಮತ್ತು ಈ ಅನುಕ್ರಮದಲ್ಲಿ ಮಾತ್ರ ಈ ನಿಯಮವನ್ನು ಪೂರೈಸಲಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ H1(ಅಡ್ಡ: 5px ಡಬಲ್ ಕೆಂಪು;), ಆದರೆ ಈ ಮೌಲ್ಯಗಳನ್ನು ಮಾರ್ಕ್ಅಪ್ ಭಾಷೆಗಳಿಂದ ಒದಗಿಸಿದರೆ ವಿನಾಯಿತಿಗಳು ಇರಬಹುದು, ಉದಾಹರಣೆಗೆ ಟೇಬಲ್ಗಾಗಿ ಟೇಬಲ್(ಗಡಿ: 2px), ಅಂದರೆ ಒಂದು ಮೌಲ್ಯವನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ.

ಸಂಪೂರ್ಣ ಗಡಿಯನ್ನು ಅಲ್ಲ, ಆದರೆ ಪ್ರತಿಯೊಂದು ಭಾಗವನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನಿರ್ವಹಿಸಲು, ನಿಯಮಗಳಿವೆ:
(ಗಡಿ-ಮೇಲ್ಭಾಗ: ಗಾತ್ರ ಶೈಲಿಯ ಬಣ್ಣ;)ಮೇಲಿನ ದಂಡೆ ನಿಯಂತ್ರಣ;
(ಗಡಿ-ಬಲ: ಗಾತ್ರದ ಶೈಲಿಯ ಬಣ್ಣ;)ಬಲಭಾಗದಲ್ಲಿ ಕರ್ಬ್ ನಿಯಂತ್ರಣ;
(ಗಡಿ-ಕೆಳಗೆ: ಗಾತ್ರದ ಶೈಲಿಯ ಬಣ್ಣ;)ಬಾಟಮ್ ಕರ್ಬ್ ನಿಯಂತ್ರಣ;
(ಗಡಿ-ಎಡ: ಗಾತ್ರ ಶೈಲಿಯ ಬಣ್ಣ;)ಎಡ ಕರ್ಬ್ ನಿಯಂತ್ರಣ.
ಈ ನಿಯಮಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಬಳಸಬಹುದು.

ವಿನಾಯಿತಿ ಈ ನಿಯಮವಾಗಿದೆ:
H1(
ಗಡಿ: 4px ಘನ ಹಸಿರು;
}
ವಿಷಯವೆಂದರೆ CSS ನಲ್ಲಿ ಕೊನೆಯ ನಿಯಮವು ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯನ್ನು ಹೊಂದಿದೆ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ಗಡಿ ಆಸ್ತಿಯು ಗಡಿ-ಎಡವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಆದ್ದರಿಂದ ಗಡಿ-ಎಡ ನಿಯಮವನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ, ಈ ರೀತಿ ಸರಿಯಾಗಿ:
H1(
ಗಡಿ: 4px ಘನ ಹಸಿರು;
ಗಡಿ-ಎಡ: 2px ಡಬಲ್ ಕೆಂಪು;
}
ಮೊದಲಿಗೆ, ನಾವು ಸಂಪೂರ್ಣ ಗಡಿಗೆ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ, ಮತ್ತು ನಂತರ ಪ್ರತ್ಯೇಕ ವಿಭಾಗಗಳಿಗೆ.

ನಾವು ಟೇಬಲ್‌ಗಳು ಮತ್ತು ಇತರ ವಿನಾಯಿತಿಗಳಿಗೆ ಬಂದಾಗ ನಾವು ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೋಡುವುದನ್ನು ಹೊರತುಪಡಿಸಿ, ಅಂಶಗಳಿಗಾಗಿ ಗಡಿಗಳಿಗಾಗಿ ನಾನು ಎಲ್ಲವನ್ನೂ ಹೊಂದಿದ್ದೇನೆ.

CSS: ಗಡಿ. ಅಂಶದ ಗಡಿಗಳು.

CSS3 ಗಡಿಗಳು

CSS3 ನೊಂದಿಗೆ, ನೀವು ದುಂಡಾದ ಗಡಿಗಳನ್ನು ರಚಿಸಬಹುದು, ಕಂಟೈನರ್‌ಗಳಿಗೆ ನೆರಳುಗಳನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ಫೋಟೋಶಾಪ್‌ನಂತಹ ವಿನ್ಯಾಸ ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ಬಳಸದೆಯೇ ಚಿತ್ರವನ್ನು ಗಡಿಯಾಗಿ ಬಳಸಬಹುದು.

ಈ ಪಾಠದಲ್ಲಿ, ಗಡಿಯ ಕೆಳಗಿನ ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ನೀವು ಕಲಿಯುವಿರಿ:

ಗಡಿ-ತ್ರಿಜ್ಯ
ಬಾಕ್ಸ್ ನೆರಳು
ಗಡಿ ಚಿತ್ರ

ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಆಸ್ತಿ	ಬ್ರೌಸರ್ ಬೆಂಬಲ
ಗಡಿ-ತ್ರಿಜ್ಯ
ಬಾಕ್ಸ್ ನೆರಳು
ಗಡಿ ಚಿತ್ರ

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 9 ಕೆಲವು ಹೊಸ ಗಡಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.

ಫೈರ್‌ಫಾಕ್ಸ್‌ಗೆ ಬಾರ್ಡರ್-ಇಮೇಜ್‌ಗಾಗಿ -moz- ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿದೆ.

ಕ್ರೋಮ್ ಮತ್ತು ಸಫಾರಿಗೆ ಬಾರ್ಡರ್-ಇಮೇಜ್‌ಗಾಗಿ -ವೆಬ್‌ಕಿಟ್- ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿದೆ.

ಗಡಿ-ಚಿತ್ರಕ್ಕಾಗಿ ಒಪೇರಾಗೆ -o- ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿದೆ.

Safari ಗೆ ಬಾಕ್ಸ್-ಶ್ಯಾಡೋಗಾಗಿ -webkit- ಪೂರ್ವಪ್ರತ್ಯಯವೂ ಸಹ ಅಗತ್ಯವಿದೆ.

ಒಪೇರಾ ಹೊಸ ಗಡಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.

CSS3 ದುಂಡಾದ ಮೂಲೆಗಳು

CSS2 ನಲ್ಲಿ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಸೇರಿಸುವುದು ಟ್ರಿಕಿ ಆಗಿತ್ತು. ನಾವು ಪ್ರತಿ ಕೋನಕ್ಕೂ ವಿಭಿನ್ನ ಚಿತ್ರವನ್ನು ಬಳಸಬೇಕಾಗಿತ್ತು.

CSS3 ನಲ್ಲಿ, ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ರಚಿಸುವುದು ಸುಲಭ.

CSS3 ನಲ್ಲಿ, ಗಡಿ-ತ್ರಿಜ್ಯದ ಆಸ್ತಿಯನ್ನು ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ರಚಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ:

ಈ ಬ್ಲಾಕ್ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಹೊಂದಿದೆ!

CSS3 ಕಂಟೈನರ್ ನೆರಳು

CSS3 ನಲ್ಲಿ, ಬಾಕ್ಸ್ ನೆರಳು ಆಸ್ತಿಯನ್ನು ಕಂಟೈನರ್‌ಗಳಿಗೆ ನೆರಳು ಸೇರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ:

CSS3 ಬಾರ್ಡರ್-ಇಮೇಜ್

CSS3 ಬಾರ್ಡರ್-ಇಮೇಜ್ ಆಸ್ತಿಯ ಮೂಲಕ, ನೀವು ಗಡಿಯನ್ನು ರಚಿಸಲು ಚಿತ್ರವನ್ನು ಬಳಸಬಹುದು:

ಗಡಿ-ಚಿತ್ರದ ಆಸ್ತಿಯು ಚಿತ್ರದ ಗಡಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ!

ಗಡಿಯನ್ನು ರಚಿಸಲು ಬಳಸಿದ ಮೂಲ ಚಿತ್ರವು ನಿಮ್ಮದಾಗಿದೆ:

ಹೊಸ ಗಡಿ ಗುಣಲಕ್ಷಣಗಳು

ಗಡಿ ಗುಣಲಕ್ಷಣ

ಗಡಿ ಗುಣಲಕ್ಷಣ, ಟ್ಯಾಗ್

, ಮೇಜಿನ ಸುತ್ತಲಿನ ಗಡಿಯ ದಪ್ಪವನ್ನು ಸೂಚಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

HTML ಗಡಿಗಳು

ಮೌಲ್ಯಗಳಿಲ್ಲದೆ ಗಡಿಯನ್ನು ಬಳಸಲು ಇದು ಸ್ವೀಕಾರಾರ್ಹವಾಗಿದೆ, ನಂತರ ಗಡಿಯ ದಪ್ಪವು ಒಂದು ಪಿಕ್ಸೆಲ್ಗೆ ಸಮಾನವಾಗಿರುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಫ್ರೇಮ್ ಅನ್ನು 3D ಪರಿಣಾಮಗಳೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ನೀವು ಹೆಚ್ಚುವರಿಯಾಗಿ ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣವನ್ನು ಅನ್ವಯಿಸಿದರೆ, ಫ್ರೇಮ್ "ಫ್ಲಾಟ್" ಆಗುತ್ತದೆ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಗಡಿ ಗುಣಲಕ್ಷಣವು ಶೂನ್ಯವಲ್ಲದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ, ಬ್ರೌಸರ್ಗಳು ಕೋಶಗಳ ಸುತ್ತಲೂ ತೆಳುವಾದ ಗಡಿಗಳನ್ನು ಸಹ ತೋರಿಸುತ್ತವೆ. ಈ ಗಡಿಗಳ ಪ್ರದರ್ಶನವನ್ನು ನಿಯಮಗಳ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ನಿಯಂತ್ರಿಸಬಹುದು.

ಮೌಲ್ಯಗಳು

ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಗಾತ್ರವನ್ನು ಸೂಚಿಸುವ ಯಾವುದೇ ಋಣಾತ್ಮಕವಲ್ಲದ ಸಂಖ್ಯೆಯಾಗಿರಬಹುದು.

ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ: 0.

ಸಿಂಟ್ಯಾಕ್ಸ್

ಅಗತ್ಯವಿರುವ ಗುಣಲಕ್ಷಣ: ಯಾವುದೂ ಇಲ್ಲ.

HTML ಉದಾಹರಣೆ: ಗಡಿ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದು

ಉದಾಹರಣೆ ಫಲಿತಾಂಶ

ಫಲಿತಾಂಶ. ಗಡಿ ಗುಣಲಕ್ಷಣವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತಿದೆ.

ಗಡಿಗಳು ಒಂದು ಅಂಶವನ್ನು ಸುತ್ತುವರೆದಿರುವ ಸಾಲುಗಳಾಗಿವೆ (ಅದು ಒಳಗೊಂಡಿರುವ ವಿಷಯ ಮತ್ತು ಅದರ ಸುತ್ತಲಿನ ಪ್ಯಾಡಿಂಗ್). ನಾವು ಈಗಾಗಲೇ ಎದುರಿಸಿದ ಉದಾಹರಣೆಯೆಂದರೆ ಟೇಬಲ್ ಒಳಗೆ ಸೆಲ್ ಫ್ರೇಮ್‌ಗಳು.

CSS ಎರಡು ರೀತಿಯ ಗಡಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ: ಒಳ ಗಡಿಗಳು ಮತ್ತು ಹೊರ ರೇಖೆಗಳು. ಚೌಕಟ್ಟುಗಳ ವಿನ್ಯಾಸಕ್ಕೆ ಜವಾಬ್ದಾರರಾಗಿರುವ ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳು "ಬಾರ್ಡರ್" ಎಂಬ ಪದದೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ, ಇದನ್ನು "ಫ್ರೇಮ್", "ಬಾರ್ಡರ್" ಎಂದು ಅನುವಾದಿಸಬಹುದು. ಬಾಹ್ಯ ರೂಪರೇಖೆಯ ಉಪಸ್ಥಿತಿ ಮತ್ತು ಸ್ವರೂಪವನ್ನು "ಔಟ್ಲೈನ್" ಪದದಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಗುಣಲಕ್ಷಣಗಳಿಂದ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ. ಬಾಹ್ಯರೇಖೆ, ಗಡಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಚೌಕಟ್ಟಿನ ಬ್ಲಾಕ್ನ ಅಗಲ ಮತ್ತು ಸ್ಥಾನದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇದನ್ನು ಒಂದು ಬದಿಯಲ್ಲಿ ಮಾತ್ರ ಸ್ಥಾಪಿಸಲಾಗುವುದಿಲ್ಲ ಗಡಿ- ಏಕಕಾಲದಲ್ಲಿ ಎಲ್ಲಾ ಕಡೆಯಿಂದ ಮಾತ್ರ.

ಮೊದಲಿಗೆ, ಗಡಿ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಮಾತನಾಡೋಣ, ನಂತರ ನಾವು ಮುಂದುವರಿಯುತ್ತೇವೆ ರೂಪರೇಖೆ.

ಗಡಿ-ಅಗಲ

ಗಡಿ ಅಗಲವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಅಂಶವು ನಾಲ್ಕು ಬದಿಗಳಲ್ಲಿ ಚೌಕಟ್ಟುಗಳಿಂದ ಸುತ್ತುವರಿದಿದೆ ಎಂಬುದು ಸ್ಪಷ್ಟವಾಗಿದೆ. ಆಸ್ತಿಯು ಗಡಿಗಳ ಅಗಲವನ್ನು ಎಲ್ಲಾ ಬದಿಗಳಿಗೆ ಒಂದೇ ಅಥವಾ ಪ್ರತಿ ಬದಿಗೆ ವಿಭಿನ್ನವಾಗಿ ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಯಾವ ಗಡಿಗಳಿಗೆ ಯಾವ ಅಗಲವನ್ನು ನಿಗದಿಪಡಿಸಬೇಕು ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ, ನೀವು ನಿಯಮದಲ್ಲಿ ಒಂದರಿಂದ ನಾಲ್ಕು ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ನೀವು ಸಾಮಾನ್ಯ ಪಿಕ್ಸೆಲ್‌ಗಳು, ಶೇಕಡಾವಾರುಗಳು ಮತ್ತು ಇತರ CSS ಉದ್ದದ ಘಟಕಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ಕಾಯ್ದಿರಿಸಿದ ಪದಗಳನ್ನು ಬಳಸಿ ಅಗಲವನ್ನು ಹೊಂದಿಸಬಹುದು ತೆಳುವಾದ(2px), ಮಧ್ಯಮ(4px) ಮತ್ತು ದಪ್ಪ(6px).

ಗಡಿ-ಅಗಲ: 16px 12px 4px 8px;

ಆನುವಂಶಿಕವಾಗಿ ಪೋಷಕರ ಮೌಲ್ಯವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ.

ಗಡಿ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು ಈ ನಿಯಮವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ ಆದರೆ ಆಸ್ತಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ ಎಂಬುದನ್ನು ಗಮನಿಸಿ ಗಡಿ-ಅಗಲ, ನಂತರ ಯಾವುದೇ ಚೌಕಟ್ಟುಗಳು ಇರುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನೀವು ಗೋಚರಿಸುವ ಗಡಿಗಳನ್ನು ಬಯಸಿದರೆ, ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಮರೆಯದಿರಿ ಗಡಿ ಶೈಲಿ.

ಆಸ್ತಿಯು ಸಾಕಷ್ಟು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಬಹುದು, ಅವೆಲ್ಲವನ್ನೂ ಕೆಳಗಿನ ಚಿತ್ರದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗಿದೆ.

ಕೊನೆಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಪ್ರತಿ ಬದಿಯಲ್ಲಿರುವ ಚೌಕಟ್ಟಿನ ದಪ್ಪದಂತೆ ಶೈಲಿಯು ತನ್ನದೇ ಆದದ್ದಾಗಿರಬಹುದು ಎಂದು ತೋರಿಸುತ್ತದೆ:

ಗಡಿ-ಶೈಲಿ: ಘನ ಡಬಲ್ ಡಾಟ್ ಯಾವುದೂ ಇಲ್ಲ

ಗಡಿ-ಬಣ್ಣ

ಹಿಂದಿನ ಗುಣಲಕ್ಷಣಗಳಂತೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಗಡಿಗಳ ಬಣ್ಣಕ್ಕೆ ಕಾರಣವಾಗಿದೆ. ನೀವು ಅದನ್ನು ಒಂದರಿಂದ ನಾಲ್ಕು ಮೌಲ್ಯಗಳಿಗೆ ಹೊಂದಿಸಬಹುದು ಮತ್ತು ಫಲಿತಾಂಶವು ನಿಮಗೆ ಈಗಾಗಲೇ ತಿಳಿದಿದೆ. ನಿಯಮವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ, ಚೌಕಟ್ಟುಗಳು ಪ್ರಸ್ತುತ ಅಂಶದ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಅಥವಾ ಇದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಮೂಲ ಅಂಶದ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಗಡಿ-ಬಣ್ಣ: #C85EFA;

ಗಡಿ

ಒಂದು ಸಾಲಿನಲ್ಲಿ ಅಂಶದ ಎಲ್ಲಾ ಬದಿಗಳಲ್ಲಿನ ಗಡಿಗಳಿಗಾಗಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು ಬರೆಯಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಉಳಿಸುತ್ತದೆ:

P (ಅಡಿಗೆ: 2px ಘನ ಹಸಿರು; )

ವಿಭಿನ್ನ ಬದಿಗಳಲ್ಲಿ ಚೌಕಟ್ಟುಗಳಿಗೆ ವಿಭಿನ್ನ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಬಹುದು:

ಗಡಿ-ಮೇಲ್ಭಾಗ- ಮೇಲಿನ ಮಿತಿ.
ಗಡಿ-ಬಲ- ಸರಿ.
ಗಡಿ-ಕೆಳಗೆ- ಕಡಿಮೆ.
ಗಡಿ-ಎಡ- ಬಿಟ್ಟು.

P (ಎಡಕ್ಕೆ ಗಡಿ: 6px ಚುಕ್ಕೆಗಳ ಹಳದಿ; )

ಬಾಹ್ಯರೇಖೆ-ಅಗಲ

ಅದೇ ಗಡಿ-ಅಗಲ, ಹೊರಗಿನ ಚೌಕಟ್ಟಿಗೆ ಮಾತ್ರ, ಒಳ ಚೌಕಟ್ಟಿಗೆ ಅಲ್ಲ. ಬಾಹ್ಯರೇಖೆಯ ದಪ್ಪವನ್ನು ಅದೇ ಮೌಲ್ಯಗಳಲ್ಲಿ ಹೊಂದಿಸುತ್ತದೆ ಗಡಿ-ಅಗಲ. ಅಂಶದ ಚೌಕಟ್ಟಿನ ದಪ್ಪದ ಜೊತೆಗೆ, ನೀವು ಅದರ ಶೈಲಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ, ಇಲ್ಲದಿದ್ದರೆ ಯಾವುದೇ ಬಾಹ್ಯರೇಖೆ ಇರುವುದಿಲ್ಲ.

ರೂಪರೇಖೆ-ಶೈಲಿ

ಆಸ್ತಿ ಮೌಲ್ಯಗಳು ನಕಲಿ ಮೌಲ್ಯಗಳು ಗಡಿ ಶೈಲಿ. ನಿಯಮವು ಬಾಹ್ಯ ಬಾಹ್ಯರೇಖೆಯ ಶೈಲಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಮೈಕೆಲ್ 2016-06-11 1 HTML ಮತ್ತು CSS 0

CSS ನಲ್ಲಿ ಡಬಲ್ ಬಾರ್ಡರ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು?

ಎಲ್ಲರಿಗೂ ನಮಸ್ಕಾರ. CSS ನಲ್ಲಿ ಡಬಲ್ ಬಾರ್ಡರ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದೆಯೇ? ಇಲ್ಲದಿದ್ದರೆ, ದಯವಿಟ್ಟು ಈ ಕಿರು ಟಿಪ್ಪಣಿಯನ್ನು ಓದಿ. ಸಾಮಾನ್ಯ ಗಡಿಯನ್ನು ಬಳಸಿ ಇದನ್ನು ಮಾಡಲಾಗುವುದಿಲ್ಲ ಎಂಬುದು ಇಲ್ಲಿ ನೀವು ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೋಗಬೇಕು.

ಗಡಿ ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಗಡಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ, ನೀವು ಒಂದನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಆದರೆ ಆಗಾಗ್ಗೆ ವಿನ್ಯಾಸಕ್ಕೆ ಹಲವಾರು ಚೌಕಟ್ಟುಗಳು ಬೇಕಾಗಬಹುದು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನೀವು ಹುಸಿ ಚೌಕಟ್ಟನ್ನು ಬಳಸಬೇಕು - ನೆರಳು.

ಬಾಕ್ಸ್ ನೆರಳು ಬಳಸಿ ಡಬಲ್ ಅಂಚು

ಸಾಮಾನ್ಯವಾಗಿ, ನೀವು CSS ನಲ್ಲಿ ನೆರಳುಗಳನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ಅಧ್ಯಯನ ಮಾಡಲು ಬಯಸಿದರೆ, ಸಂಬಂಧಿತ ವಿಷಯದ ಬಗ್ಗೆ ಓದಲು ನಾನು ನಿಮಗೆ ಸಲಹೆ ನೀಡುತ್ತೇನೆ. ಈ ಲೇಖನದಲ್ಲಿ, ನಾನು ಆಸ್ತಿಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವಿವರವಾಗಿ ವಿವರಿಸುವುದಿಲ್ಲ, ಆದರೆ ಡಬಲ್ ಬಾರ್ಡರ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬ ತಂತ್ರವನ್ನು ಸರಳವಾಗಿ ತೋರಿಸುತ್ತೇನೆ. ಆದ್ದರಿಂದ, ನಾನು ಸಾಮಾನ್ಯ ಬ್ಲಾಕ್ ಅನ್ನು ರಚಿಸುತ್ತೇನೆ ಮತ್ತು ಅದಕ್ಕೆ ಕೆಲವು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುತ್ತೇನೆ. ಬ್ಲಾಕ್ ಯಾವುದಾದರೂ ಮತ್ತು ಯಾವುದೇ ವಿಷಯವಾಗಿರಬಹುದು. ನನ್ನ ವಿಷಯದಲ್ಲಿ, ಇದು ಸರಳ DIV ಆಗಿದೆ, ಆದ್ದರಿಂದ ನಾನು html ಕೋಡ್ ಅನ್ನು ಸಹ ತೋರಿಸುವುದಿಲ್ಲ. ಮತ್ತು ಶೈಲಿಗಳು ಇಲ್ಲಿವೆ:

ಡಿವಿ(
ಹಿನ್ನೆಲೆ: #E0D8A3;
ಅಗಲ: 180px;
ಎತ್ತರ: 110px;
ಪ್ಯಾಡಿಂಗ್: 12px;
}

ಸರಿ, ಬ್ಲಾಕ್ ವಿನ್ಯಾಸದ ಒಂದು ವಿಶಿಷ್ಟ ಉದಾಹರಣೆ.
ಈಗ ಬಹು ನೆರಳುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡಬಲ್ ಫ್ರೇಮ್ ಅನ್ನು ರಚಿಸೋಣ. ನಾನು ಈ ಕೆಳಗಿನ ಆಸ್ತಿಯನ್ನು ಬ್ಲಾಕ್‌ನ ಶೈಲಿಗಳಿಗೆ ಸೇರಿಸುತ್ತೇನೆ:

ಬಾಕ್ಸ್ ನೆರಳು: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ನೀವು ನೋಡುವಂತೆ, ಇದು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಹೊರಹೊಮ್ಮಿತು. ಬಾಕ್ಸ್-ನೆರಳು ಕೇವಲ 5 ನಿಯತಾಂಕಗಳನ್ನು ಹೊಂದಿದೆ. ಮೊದಲನೆಯದು ನೆರಳಿನ ಸಮತಲ ಸ್ಥಳಾಂತರವಾಗಿದೆ, ಎರಡನೆಯದು ಲಂಬವಾದ ಸ್ಥಳಾಂತರವಾಗಿದೆ. ಮೂರನೇ ಮತ್ತು ನಾಲ್ಕನೇ ನಿಯತಾಂಕಗಳು ಮಸುಕು ಮತ್ತು ಹಿಗ್ಗಿಸುವಿಕೆ. ನೀವು ನೋಡುವಂತೆ, ನಾವು ಮೊದಲ ಮೂರನ್ನು ಮುಟ್ಟುವುದಿಲ್ಲ. ನಮಗೆ ಚೂಪಾದ ನೆರಳು ಬೇಕಾಗಿರುವುದರಿಂದ ನಮಗೆ ಮಸುಕು ಅಗತ್ಯವಿಲ್ಲ. ನೀವು ನೋಡುವಂತೆ, ನಾನು ನಾಲ್ಕನೇ ನಿಯತಾಂಕವನ್ನು ಸೂಚಿಸಿದೆ - ವಿಸ್ತರಿಸುವುದು. ನೆರಳು ಜೋಡಿಸಲಾದ ಅಂಶಕ್ಕಿಂತ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಎಂಬುದನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ.

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಎಲ್ಲವೂ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ - ನೆರಳು ಅಂಶದ ಗಾತ್ರದಂತೆಯೇ ಇರುತ್ತದೆ ಮತ್ತು ಅದರ ಅಡಿಯಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಇರುತ್ತದೆ. ನೀವು ಹಿಗ್ಗಿಸುವಿಕೆಯನ್ನು ಬದಲಾಯಿಸಿದರೆ, ನೆರಳು ಅಂಶವನ್ನು ಮೀರಿ ಚಾಚಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಗಡಿ ಆಸ್ತಿಯಂತೆಯೇ ನೀವು ಗಡಿಗಳನ್ನು ಹೇಗೆ ರಚಿಸಬಹುದು. ಸರಿ, ಐದನೇ ಪ್ಯಾರಾಮೀಟರ್ನೊಂದಿಗೆ, ಎಲ್ಲವೂ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ - ಇದು ನೆರಳಿನ ಬಣ್ಣವಾಗಿದೆ.

ನೀವು ನೋಡುವಂತೆ, ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾದ ಪ್ರತಿ ಹೊಸ ನೆರಳಿನ ನಿಯತಾಂಕಗಳನ್ನು ನಾನು ಸರಳವಾಗಿ ಪಟ್ಟಿ ಮಾಡಿದ್ದೇನೆ. ಅದೇ ರೀತಿಯಲ್ಲಿ ನೀವು ಟ್ರಿಪಲ್ ಫ್ರೇಮ್ ಇತ್ಯಾದಿಗಳನ್ನು ರಚಿಸಬಹುದು ಎಂದು ನೀವು ಈಗಾಗಲೇ ಊಹಿಸಿದ್ದೀರಿ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ಇಲ್ಲಿ ಯಾವುದೇ ನಿರ್ಬಂಧಗಳಿಲ್ಲ. ವಾಸ್ತವವಾಗಿ, ನನ್ನಂತೆ, ಪ್ರಶ್ನೆಯನ್ನು ಮುಚ್ಚಲಾಗಿದೆ, ಮತ್ತು ನೀವು ಯಾವುದೇ ಪ್ರಶ್ನೆಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ನೀವು ಅವುಗಳನ್ನು ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ಬರೆಯಬಹುದು.

ನಿಮ್ಮ ಗಮನದ ಕ್ಷಣ:ನಾವೆಲ್ಲರೂ ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ವಿಶ್ವಾಸಾರ್ಹ ಹೋಸ್ಟಿಂಗ್‌ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲು ಬಯಸುತ್ತೇವೆ. ನಾನು ನೂರಾರು ಹೋಸ್ಟಿಂಗ್‌ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಿದ್ದೇನೆ ಮತ್ತು ಉತ್ತಮವಾದದ್ದನ್ನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ - HostIQಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಇದರ ಬಗ್ಗೆ ನೂರಾರು ಸಕಾರಾತ್ಮಕ ವಿಮರ್ಶೆಗಳಿವೆ, ಸರಾಸರಿ ಬಳಕೆದಾರರ ರೇಟಿಂಗ್ 5 ರಲ್ಲಿ 4.8 ಆಗಿದೆ. ನಿಮ್ಮ ಸೈಟ್‌ಗಳು ಸಂತೋಷವಾಗಿರಲಿ.