css怎么添加一條屬性能夠繪制一個(gè)矩形框

這篇文章主要介紹“css怎么添加一條屬性能夠繪制一個(gè)矩形框”，在日常操作中，相信很多人在css怎么添加一條屬性能夠繪制一個(gè)矩形框問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對大家解答”css怎么添加一條屬性能夠繪制一個(gè)矩形框”的疑惑有所幫助！接下來(lái)，請跟著(zhù)小編一起來(lái)學(xué)習吧！

添加一條屬性，它能夠繪制一個(gè)矩形框。它可以指定矩形邊的顏色，邊的寬度，邊的樣式，以及矩形區域。如：
picl:blue solid 2px rect(100px 300px 300px 100px);
picl為屬性名稱(chēng)，blue為邊的顏色，solid為邊 的樣式，2px為邊的寬度，rect(100px 300px 200px 50px)為矩形區域。

步驟：

（1）.通過(guò)在 css/CSSPropertyNames.in文件中增加一個(gè)屬性名的關(guān)鍵字；
（2）.使用perl命令(#perl makeprop.pl)，生成對應的.cpp和.h文件，這兩個(gè)文件包含了屬性名和屬性ID，以及屬性名的查找規則;
（3）.將（2）中生成 的兩個(gè)文件拷貝到generated/ 目錄下；
（4）.在CSSStyleSelector.cpp， CSSParser.cpp兩個(gè)文件中提供了屬性ID對應的接口:(中間一些具體處理不詳細闡述，這里只說(shuō)明總體步驟)

a.在 CSSParser.cpp中的“bool CSSParser::parseValue(int propId, bool important)”函數中增加“case CSSPropertyPicl: ”以及對應的處理代碼，它是網(wǎng)頁(yè)上css樣式中我們自定義屬性“picl”的解析的入口；
說(shuō)明：以此函數為起點(diǎn)，將picl中各種值進(jìn)行解析，判 斷值是否合法。如果合法，將其進(jìn)行保存，保存后會(huì )更新css樣式。我們所關(guān)心的是如何取出picl屬性的各個(gè)值，以及怎樣進(jìn)行保存，我們不必去修改與樣式 更新有關(guān)的代碼，當解析完后，瀏覽器會(huì )更新css樣式，丟棄無(wú)效的樣式，只保留合法（有效）的樣式。由于picl屬性是復合屬性，添加本條屬性只需調用這 個(gè)文件中的“bool CSSParser::parseShorthand(int propId, const int *properties, int numProperties, bool important)”函數，它就會(huì )完成它里面對應的各種單一屬性的解析。
b.如果屬性是單一 屬性，必須在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函數中添加對應的case語(yǔ)句，它是css樣式執行的入口。由于我們添加的屬性是一條復合屬性，它在執行時(shí)會(huì )通過(guò)它里面的單一屬性進(jìn)行執 行。因此，在CSSStyleSelector.cpp中的“void CSSStyleSelector::applyProperty(int id, CSSValue *value)”函數中不必添加本條屬性對應的case語(yǔ)句。
說(shuō)明：我借助了border屬性的方法來(lái)保存“邊的顏 色，邊的寬度，邊的樣式”，我們主要需要做的是對矩形值的處理，以及設置一個(gè)執行我們的“picl”屬性的標志。我添加了一個(gè)單一屬性：hic，它主要保 存矩形的四個(gè)值。在CSSStyleSelector.cpp中，“邊的顏色，邊的寬度，邊的樣式”這三個(gè)值由類(lèi)似border屬性處理方式進(jìn)行了傳遞， 矩形的值通過(guò)“ case CSSPropertyHic: ”來(lái)傳遞，當“picl”屬性的標志被激活時(shí)，則取出picl屬性的各個(gè)值，做如下處理：
paintInfo.context->setStrokeColor(); 設置邊的顏色；
paintInfo.context->setStrokeThickness(); 設置邊的寬度；
paintInfo.context->setStrokeStyle(); 設置邊邊的樣式；
paintInfo.context->drawLine(） 畫(huà)矩形的一條邊，需要畫(huà)四次。

修改的文件：
(1).webkit/WebCore/css/CSSPropertyNames.in 中，在文件末尾增加如下兩行：
hic;
picl;
(2).webkit/WebCore/css/CSSParser.cpp 中,CSSParser::parseValue()函數中增加“case CSSPropertyPicl: ”以及對應的處理代碼。如下：
case CSSPropertyPicl: {
const int properties4 = { CSSPropertyBorderWidth, CSSPropertyBorderStyle,
CSSPropertyBorderColor, CSSPropertyHic};
return parseShorthand(propId, properties, 4, important);
}

(3).webkit/WebCore /css/CSSStyleSelector.cpp中，CSSStyleSelector::applyProperty()函數中添加對應的 “case CSSPropertyHic: ”，這里取出矩形的四條邊的值，并傳送到下面。
(4).webkit/WebCore /rendering/RenderObject.h中添加hasHic(),getHicRect()兩個(gè)函數的定義。
(5).webkit/WebCore /rendering/style/RenderStyle.h中添加如下幾個(gè)函數：
Length hicLeft() const { return visual->hic.left(); }
Length hicRight() const { return visual->hic.right(); }
Length hicTop() const { return visual->hic.top(); }
Length hicBottom() const { return visual->hic.bottom(); }
LengthBox hic() const { return visual->hic; }
bool hasHic() const { return visual->hasHic; }
void setHasHic(bool b =true) { SET_VAR(visual, hasHic, b) }
void setHic(Length top, Length right, Length bottom, Length left);
(6).webkit/WebCore /rendering/style/RenderStyle.cpp中添加setHic()函數的實(shí)現；
(7).webkit/WebCore /rendering/style/StyleVisualData.h中添加：
LengthBox hic;
bool hasHic : 1; //hasHic
(8).webkit/WebCore/rendering/RendBox.h中添加：
virtual IntRect getHicRect(int tx, int ty);
(9).webkit/WebCore/rendering /RendBox.cpp中，RenderBox::paintBoxDecorations()函數中添加畫(huà)矩形的實(shí)現，以及getHicRect（） 函數的實(shí)現