课程表

CSS 高级教程

• CSS ਬਾਹਰੀ ਪੁਸਤਕ
• CSS ਸਰਲ ਸਿੱਖਿਆ
• CSS ਬੁਨਿਆਦੀ ਗਰੰਟੀ ਵਾਲੀ ਗੰਜਨ ਕਿਸਮ
• CSS ਪ੍ਰੋਗਰੈਮਿੰਗ ਵਾਲੀ ਗੰਜਨ ਕਿਸਮ
• CSS ਪ੍ਰਤੀਕਰਮੀ ਚੋਣਕਰਤਾ
• CSS id ਚੋਣਕਰਤਾ
• CSS ਵਰਗ ਚੋਣਕਰਤਾ
• CSS ਬਣਾਉਣ ਦਾ ਤੌਰ
• CSS ਬੈਕਗਰਾਊਂਡ
• CSS ਟੈਕਸਟ
• CSS ਫੰਟ
• CSS ਲਿਸਟ

CSS 框模型

• CSS ਫੈਂਡਰ ਮਾਡਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
• CSS ਇੰਨਰਮਾਰਜਨ
• CSS ਬੋਰਡਰ
• CSS ਮਾਰਜਨ
• CSS ਮਾਰਜਨ ਮਿਲਣ ਦਾ ਤੌਰ

CSS 定位

• CSS ਸਥਾਨਿਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
• CSS ਸਮਾਨ ਸਥਾਨਿਕ
• CSS ਸਥਾਨਿਕ ਸਥਾਨਿਕ
• CSS ਫਲੌਟਿੰਗ

CSS 选择器

• CSS ਏਲੀਮੈਂਟ ਚੋਣਕਰਤਾ
• CSS ਚੋਣਕਰਤਾ ਗਰੁੱਪ
• CSS ਵਰਗ ਚੋਣਕਰਤਾ ਵਿਸਥਾਰ
• CSS id ਚੋਣਕਰਤਾ ਵਿਸਥਾਰ
• CSS ਆਪਣੀ ਚੋਣਕਰਤਾ ਵਿਸਥਾਰ
• CSS ਵੰਡਾ ਚੋਣਕਰਤਾ
• CSS ਉਪ ਏਲੀਮੈਂਟ ਚੋਣਕਰਤਾ
• CSS ਅਡਜੇਸਟਸ ਬ੍ਰਦਰ ਚੋਣਕਰਤਾ

选修课

课程推荐：

• CodeW3C.com ਪੁਨਰਨਿਰਮਾਣ ਟੋਪੀ

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS ਬੋਰਡਰ

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

ਹਰੇਕ ਬਾਰ ਕੇਵਲ 3 ਪਹਿਲੂ ਹੁੰਦੇ ਹਨ: ਚੌਕਸਾਈ, ਸਟਾਈਲ ਅਤੇ ਰੰਗ। ਹੇਠਲੇ ਪ੍ਰਸਤਾਵ ਵਿੱਚ, ਅਸੀਂ ਇਨ੍ਹਾਂ ਤਿੰਨਾਂ ਪਹਿਲੂਆਂ ਦੀ ਵਿਸਤਾਰ ਸ਼ਿਕਾਇਤ ਕਰਾਂਗੇ。

ਬਾਰ ਅਤੇ ਪਿੱਛੋਕਦਾ ਬਾਕਸ

CSS ਨਿਯਮ ਕਹਿੰਦਾ ਹੈ ਕਿ ਬਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੇ ਹਨ 'ਐਲੀਮੈਂਟ ਦੇ ਪਿੱਛੋਕਦੇ ਬਾਕਸ ਉੱਤੇ'। ਇਹ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਕਿਉਂਕਿ ਕੁਝ ਬਾਰ 'ਅੰਤਰਾਂਤੀ' ਹੁੰਦੇ ਹਨ (ਉਦਾਹਰਣ ਵਜੋਂ, ਨਕਲੀ ਬਾਰ ਜਾਂ ਨਾਲੀ ਬਾਰ), ਐਲੀਮੈਂਟ ਦਾ ਪਿੱਛੋਕਦਾ ਬਾਕਸ ਬਾਰ ਦੇ ਦਿਸ਼ਾ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ。

CSS2 ਨੇ ਕਿਹਾ ਹੈ ਕਿ ਪਿੱਛੋਕਦਾ ਬਾਕਸ ਕੇਵਲ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਤੱਕ ਹੀ ਵਿਸਥਾਰ ਕਰਦਾ ਹੈ, ਨਹੀਂ ਕਿ ਬਾਰ ਤੱਕ। ਬਾਅਦ ਵਿੱਚ CSS2.1 ਨੇ ਇਸ ਨੂੰ ਸੁਧਾਰਿਆ: ਐਲੀਮੈਂਟ ਦਾ ਪਿੱਛੋਕਦਾ ਬਾਕਸ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਮੱਗਰੀ, ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਅਤੇ ਬਾਰ ਖੇਤਰ ਦਾ ਪਿੱਛੋਕਦਾ ਬਾਕਸ। ਮੱਧ ਬ੍ਰਾਊਜ਼ਰ ਸਾਰੇ CSS2.1 ਦੇ ਨਿਯਮਾਂ ਨੂੰ ਫਲਾਣੇ ਨਹੀਂ ਦੇਖਦੇ, ਪਰ ਕੁਝ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪ੍ਰਦਰਸ਼ਨ ਹੋ ਸਕਦਾ ਹੈ。

ਬਾਰ ਦੇ ਸਟਾਈਲ

ਸਟਾਈਲ ਹੈ ਬਾਰ ਦਾ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ, ਇਹ ਨਹੀਂ ਕਿ ਸਟਾਈਲ ਬਾਰ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ (ਕੀ ਸਟਾਈਲ ਬਾਰ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ), ਬਲਕਿ ਇਹ ਇਹ ਕਿ ਸਟਾਈਲ ਨਾ ਹੋਣ ਤਾਂ ਕੋਈ ਬਾਰ ਨਹੀਂ ਹੋਵੇਗਾ。

CSS ਦਾ border-style ਪ੍ਰਾਪਰਟੀ10 ਵੱਖ-ਵੱਖ ਗ਼ੈਰ-inherit ਸਟਾਈਲਾਂ ਨਿਰਧਾਰਿਤ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ, ਜਿਸ ਵਿੱਚ none ਵੀ ਸ਼ਾਮਲ ਹੈ。

ਉਦਾਹਰਣ ਵਜੋਂ, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਦੇ ਬਾਰ ਨੂੰ outset ਸਟਾਈਲ ਵਿੱਚ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਇਹ ਕੋਈ 'ਹੱਥੀ ਬਟਨ' ਜਿਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ:

a:link img {border-style: outset;}

ਕਈ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕਰਨਾ

ਤੁਸੀਂ ਇੱਕ ਬਾਰ ਨੂੰ ਕਈ ਸਟਾਈਲ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਣ ਵਜੋਂ:

p.aside {border-style: solid dotted dashed double;}

ਉੱਪਰਲਾ ਇਹ ਨਿਯਮ ਕਲਾਸ ਨਾਮ 'aside' ਵਾਲੇ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ 4 ਤਰਾਂ ਦੇ ਬਾਰ ਸਟਾਈਲ ਸੈੱਟ ਕਰਦਾ ਹੈ: ਸਟਾਈਲ ਉੱਚੇ ਬਾਰ, ਨਕਲੀ ਸਟਾਈਲ ਦਾ ਦਾਇਰਾ, ਨਾਲੀ ਸਟਾਈਲ ਦਾ ਨੀਚੇ ਅਤੇ ਦੁਵਾਰਾ ਸਟਾਈਲ ਦਾ ਸੱਜੇ ਬਾਰ。

ਅਸੀਂ ਇੱਥੇ ਦੀ ਕੀਮਤ ਨੂੰ top-right-bottom-left ਕਿਸਮ ਵਿੱਚ ਅਪਣਾਇਆ ਦੇਖਿਆ ਹੈ, ਅਤੇ ਕਈ ਕੀਮਤਾਂ ਨਾਲ ਵੱਖ-ਵੱਖ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਸੈੱਟ ਕਰਨ ਦੇ ਸਮੇਂ ਵੀ ਇਹੀ ਕਿਸਮ ਦੇਖੀ ਹੈ。

ਇੱਕ ਸਿੱਧੇ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕਰਨਾ

ਤੁਸੀਂ ਜੇਕਰ ਇੱਕ ਐਲੀਮੈਂਟ ਬਾਕਸ ਦੇ ਕਿਸੇ ਇੱਕ ਕਿਨਾਰੇ ਨੂੰ ਬਾਰ ਸਟਾਈਲ ਸੈੱਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਨਹੀਂ ਕਿ ਸਾਰੇ 4 ਕਿਨਾਰਿਆਂ ਦੇ ਬਾਰ ਸਟਾਈਲ ਸੈੱਟ ਕਰਨਾ, ਤਾਂ ਤੁਸੀਂ ਹੇਠਲੇ ਇੱਕ ਸਿੱਧੇ ਬਾਰ ਸਟਾਈਲ ਪ੍ਰਾਪਰਟੀ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

ਇਸ ਲਈ ਇਹ ਦੋ ਤਰੀਕੇ ਬਰਾਬਰ ਹਨ:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

ਧਿਆਨ:ਜੇਕਰ ਤੁਸੀਂ ਦੂਜੇ ਤਰੀਕੇ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਪਾਸੇ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਛੋਟੀ ਲਿਖਣ ਵਿੱਚ ਸੈਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਕਿਉਂਕਿ ਜੇਕਰ ਇੱਕ ਪਾਸੇ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ border-style ਦੇ ਪਹਿਲਾਂ ਸੈਟ ਕੀਤੀ ਜਾਵੇ, ਤਾਂ ਛੋਟੀ ਲਿਖਣ ਦਾ ਮੁੱਲ border-style none ਨੂੰ ਹੋਰ ਮੁੱਲ ਨਾਲ ਬਦਲ ਦੇਵੇਗਾ。

ਬਾਰਡਰ ਦੀ ਚੌਕੇਦਾਰੀ

ਤੁਸੀਂ border-width ਵਿਸ਼ੇਸ਼ਤਾਬਾਰਡਰ ਦੀ ਚੌਕੇਦਾਰੀ ਸੈਟ ਕਰਨਾ

ਬਾਰਡਰ ਦੀ ਚੌਕੇਦਾਰੀ ਸੈਟ ਕਰਨ ਲਈ ਦੋ ਤਰੀਕੇ ਹਨ: ਲੰਬਾਈ ਮੁੱਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ 2px ਜਾਂ 0.1em; ਜਾਂ 3 ਕੀਵਰਡਸ ਵਿੱਚੋਂ ਇੱਕ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ thin, medium (ਮੂਲ ਮੁੱਲ) ਅਤੇ thick。

ਟਿੱਪਣੀ:CSS ਨੇ 3 ਕੀਵਰਡਸ ਦੀ ਵਿਆਪਕ ਚੌਕੇਦਾਰੀ ਨਾ ਨਿਰਧਾਰਿਤ ਕੀਤੀ ਹੈ, ਇਸ ਲਈ ਇੱਕ ਯੂਜ਼ਰ ਏਜੈਂਟ ਵਿੱਚ thin, medium (ਮੂਲ ਮੁੱਲ) ਅਤੇ thick ਨੂੰ 5px, 3px ਅਤੇ 2px ਦੇ ਰੂਪ ਵਿੱਚ ਸੈਟ ਕਰ ਸਕਦਾ ਹੈ, ਜਦਕਿ ਦੂਜੇ ਯੂਜ਼ਰ ਏਜੈਂਟ ਵਿੱਚ ਇਹ ਹੋਰ ਵੱਲ ਸੈਟ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ 3px, 2px ਅਤੇ 1px。

ਇਸ ਲਈ, ਅਸੀਂ ਬਾਰਡਰ ਦੀ ਚੌਕੇਦਾਰੀ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰ ਸਕਦੇ ਹਾਂ:

p {border-style: solid; border-width: 5px;}

ਜਾਂ:

p {border-style: solid; border-width: thick;}

ਇੱਕ ਪਾਸੇ ਦੀ ਚੌਕੇਦਾਰੀ ਨਿਰਧਾਰਿਤ ਕਰਨਾ

ਤੁਸੀਂ top-right-bottom-left ਦੀ ਕਿਸਮ ਵਿੱਚ ਬਾਰਡਰ ਦੀਆਂ ਚਾਰ ਪਾਸੇ ਦੀ ਚੌਕੇਦਾਰੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

ਉੱਪਰਲੇ ਉਦਾਹਰਣ ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਛੋਟੀ ਕਰ ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ (ਇਸ ਰੂਪ ਨੂੰ ਛੋਟੀ ਲਿਖਣਾ ਕਿਹਾ ਜਾਂਦਾ ਹੈ):ਮੁੱਲ ਨਕਲ）：

p {border-style: solid; border-width: 15px 5px;}

ਤੁਸੀਂ ਵੀ ਹੇਠਲੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ ਬਾਰਡਰ ਦੀ ਚਾਰ ਪਾਸੇ ਦੀ ਚੌਕੇਦਾਰੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

ਇਸ ਲਈ, ਹੇਠਲੇ ਰੂਲ ਉੱਪਰਲੇ ਉਦਾਹਰਣ ਨਾਲ ਬਰਾਬਰ ਹਨ:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

ਬਾਰਡਰ ਨਹੀਂ ਹੈ

ਪਹਿਲਾਂ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ, ਤੁਸੀਂ ਦੇਖਿਆ ਹੋਏ ਕਿ ਜੇਕਰ ਤੁਸੀਂ ਕੋਈ ਬਾਰਡਰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਬਾਰਡਰ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰਨਾ ਪਵੇਗਾ, ਜਿਵੇਂ ਕਿ solid ਜਾਂ outset。

ਤਾਂ ਜੇਕਰ border-style ਨੂੰ none ਕਰ ਦੇਈ ਹੁਣ ਕੀ ਹੋਏਗਾ:

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：

h1 {border-width: 20px;}

ਕਿਉਂਕਿ border-style ਦੀ ਮੂਲਤਬੀ ਕੀਮਤ none ਹੈ ਤਾਂ ਘੋਸ਼ਣਾ ਨਹੀਂ ਕਰਨ ਦੇ ਮਾਮਲੇ ਵਿੱਚ border-style: none ਹੋਵੇਗਾ。ਇਸ ਲਈ ਤੁਸੀਂ ਚਾਹੋਣ ਕਿ ਬਾਰੀਕੀ ਦਿਖਣ, ਤਾਂ ਬਾਰੀਕੀ ਸਟਾਈਲ ਘੋਸ਼ਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਬਾਰੀਕੀ ਰੰਗ

ਬਾਰੀਕੀ ਰੰਗ ਸੈਟ ਕਰਨਾ ਬਹੁਤ ਸਰਲ ਹੈ। CSS ਇੱਕ ਸਰਲ border-color ਪ੍ਰਤੀਯੋਗਿਤਾ، ਇਹ ਇੱਕ ਵਾਰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਚਾਰ ਕੰਮਕਾਜ ਕੀਮਤਾਂ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ。

ਕੋਈ ਵੀ ਤਰਾਂ ਦੀ ਕੰਮਕਾਜ ਕੀਮਤ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਨਾਮਕ ਰੰਗ, ਸਿਫ਼ਰੀ ਅਤੇ RGB ਕੀਮਤ:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

ਜੇਕਰ ਕੰਮਕਾਜ ਕੀਮਤ ਚਾਰ ਤੋਂ ਘੱਟ ਹੁੰਦੀ ਹੈ ਤਾਂ ਕੀਮਤ ਨਕਲ ਕਾਰਜ ਕਰਦੀ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ ਹੇਠ ਦੇ ਨਿਯਮ ਘੋਸ਼ਣਾ ਪੈਦਾ ਕਰਦੀ ਹੈ ਕਿ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਉੱਪਰ ਅਤੇ ਹੇਠ ਬਾਰੀਕੀ ਕਾਲੇ ਰੰਗ ਅਤੇ ਪਿੱਛੇ ਅਤੇ ਪਹਿਲੇ ਬਾਰੀਕੀ ਲਾਲ ਰੰਗ ਹੈ:

p {
  border-style: solid;
  border-color: blue red;
  }

ਟਿੱਪਣੀ:ਮੂਲਤਬੀ ਬਾਰੀਕੀ ਰੰਗ ਬਾਰੀਕੀ ਐਲੀਮੈਂਟ ਦੇ ਮੂਲਤਬੀ ਰੰਗ ਨਾਲ ਮਿਲਦਾ-ਜੁਲਦਾ ਹੈ। ਜੇਕਰ ਬਾਰੀਕੀ ਕੋਈ ਰੰਗ ਨਹੀਂ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਤਾਂ ਉਹ ਐਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਰੰਗ ਨਾਲ ਮਿਲਦਾ-ਜੁਲਦਾ ਹੋਵੇਗਾ। ਦੂਜੇ ਪਾਸੇ ਜੇਕਰ ਐਲੀਮੈਂਟ ਕੋਈ ਟੈਕਸਟ ਨਹੀਂ ਹੈ ਤਾਂ ਉਹ ਇੱਕ ਸਾਲਾਨਾ ਹੋਵੇਗਾ ਜੋ ਕਿ ਇੱਕ ਚਿੱਤਰ ਦੇ ਬਾਰੇ ਹੋਵੇ ਤਾਂ ਉਸ ਸਾਲਾਨਾ ਦੀ ਬਾਰੀਕੀ ਰੰਗ ਮਾਲਕੀ ਐਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਰੰਗ ਨਾਲ ਮਿਲਦਾ-ਜੁਲਦਾ ਹੋਵੇਗਾ (ਕਿਉਂਕਿ color ਪਰਿਵਾਰਿਤ ਹੁੰਦਾ ਹੈ)। ਇਹ ਮਾਲਕੀ ਐਲੀਮੈਂਟ ਹੋਰ ਕਈ ਹੋ ਸਕਦੇ ਹਨ ਜਿਵੇਂ ਕਿ body, div ਜਾਂ ਦੂਜੇ table:

ਇੱਕ ਤਰਫ਼ ਬਾਰੀਕੀ ਰੰਗ ਨਿਰਧਾਰਤ ਕਰਨਾ

ਕੁਝ ਇੱਕ ਤਰਫ਼ ਬਾਰੀਕੀ ਰੰਗ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਵੀ ਹਨ। ਉਨ੍ਹਾਂ ਦਾ ਮੰਤਰ ਇੱਕ ਤਰਫ਼ ਬਾਰੀਕੀ ਸਟਾਈਲ ਅਤੇ ਵਿਸ਼ਾਲਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

h1 ਐਲੀਮੈਂਟ ਲਈ ਸਿੱਧੀ ਬਾਰੀਕੀ ਕਾਲੇ ਰੰਗ ਅਤੇ ਸੱਜੇ ਬਾਰੀਕੀ ਲਾਲ ਰੰਗ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਇਸ ਤਰ੍ਹਾਂ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

ਪਾਰਦਰਸ਼ੀ ਬਾਰੀਕੀ

ਅਸੀਂ ਹਾਲ ਹੀ ਵਿੱਚ ਗੱਲ ਕੀਤੀ ਸੀ ਕਿ ਜੇਕਰ ਬਾਰੀਕੀ ਕੋਈ ਸਟਾਈਲ ਨਹੀਂ ਹੈ ਤਾਂ ਉਸ ਦੀ ਕੋਈ ਵਿਸ਼ਾਲਤਾ ਨਹੀਂ ਹੁੰਦੀ। ਪਰ ਕੁਝ ਹਾਲਾਤਾਂ ਵਿੱਚ ਤੁਸੀਂ ਅਜਿਹੀ ਬਾਰੀਕੀ ਬਣਾਉਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਕਿ ਕੋਈ ਪਾਰਦਰਸ਼ੀ ਬਾਰੀਕੀ ਹੋਵੇ。

CSS2 ਨੇ ਬਾਰੀਕੀ ਰੰਗ ਕੀਮਤ transparent ਦਾ ਹੋਣਾ ਸ਼ੁਰੂ ਕੀਤਾ। ਇਹ ਕੀਮਤ ਬਾਰੀਕੀ ਅਜਿਹੀ ਬਣਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਕਿ ਕੋਈ ਪਾਰਦਰਸ਼ੀ ਬਾਰੀਕੀ ਹੋਵੇ। ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ:

AAA
BBB
CCC

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

亲自试一试

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 边框属性

ਟੂਲਬਾਕਸ

CSS ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

CSS ਇੰਸਟੈਂਸ

CSS ਟੈਸਟ

CSS ਟੂਨਿਕ

ਸਪਾਂਸਰ ਲਿੰਕ